View stunning SlideShares in full-screen with the new iOS app!Introducing SlideShare for AndroidExplore all your favorite topics in the SlideShare appGet the SlideShare app to Save for Later — even offline
View stunning SlideShares in full-screen with the new Android app!View stunning SlideShares in full-screen with the new iOS app!
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.
Best practices in CSS1)Global reset style sheet usage2)Typography (95% of web design )3)Sprites4)Table Striping (Zebra Stripes) .. etc
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
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
CompassCompass is a framework. Its a framework ofpatterns and best practices written in Sass tosolve common stylesheet problems Compass *.scss *.css Sass Engine
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
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
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