Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Compass n Sass

1,364 views

Published on

Presentation on Compass n Sass

Published in: Technology, Education
  • Be the first to comment

Compass n Sass

  1. 1. Compass-n-Sass -- Pradeep S
  2. 2. CSSCss is a stylesheet language used fordescribing presentation semanticsThe style sheet with the highest priority controlsthe content display. Declarations not set in thehighest priority source are passed on to asource of lower priority, such as the user agentstyle. This process is called cascading.
  3. 3. CSS & CSS3Rule:Selector (#id){ style declaration (border-radius:4px;) vendor specific style declaration (-moz-border-radius:4px;)}
  4. 4. Best practices in CSS1)Global reset style sheet usage2)Typography (95% of web design )3)Sprites4)Table Striping (Zebra Stripes) .. etc
  5. 5. LimitationsCss has following drawbacks:1)Variables and functions cannot be declaredto reduce the redundancy in declarations2)Need a standard compression mechanism3)Need to depend on web designers for spriteimages and setting the position of imagesCompass n Sass helps us in solving the abovedrawbacks
  6. 6. SassSass is a language,It is an extension of CSS3to create better stylesheets with less effortAll Sass files end with extension *.scss Sass *.scss Engine *.css
  7. 7. Sass features1)Nesting (Code link)2)Variables ,Interpolations, Operators andFunctions (Code link)3)Mixins, Arguments (Code link)4)Imports (Code link)5)Partials
  8. 8. CompassCompass is a framework. Its a framework ofpatterns and best practices written in Sass tosolve common stylesheet problems Compass *.scss *.css Sass Engine
  9. 9. Installing Compass n Sass1)Install Ruby.2) "gem install sass" to install sass3) "gem install compass" to install compass4) "compass create" to create webdevelopment directory5)"compass watch" to create the css filesdynamically with changes made in the scssfiles
  10. 10. Compass features1)Inbuilt CSS reset stylesheet2)Inbuilt CSS3 Mixins3)Inbuilt Typography Mixin and much more liketable helpers4)Sprite mixins (code link)5)Built in CSS Compression
  11. 11. Compass prerequisiteNo need to be a Ruby Dev, knowledge ofconfiguring config.rb file should is must.Tips on config.rb file:1)sass_dir -- directory of sass files2)images_dir -- directory of images3)css_dir -- directory of the css files4)output_style -- style for the compiled css filesScout App http://mhs.github.com/scout-app/provides UI for configuring the directories
  12. 12. References1)http://sass-lang.com/tutorial.html2)http://compass-style.org/3)http://mhs.github.com/scout-app/

×