Uploaded on

Presentation on Compass n Sass

Presentation on Compass n Sass

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
828
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Compass-n-Sass -- Pradeep S
  • 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. CSS & CSS3Rule:Selector (#id){ style declaration (border-radius:4px;) vendor specific style declaration (-moz-border-radius:4px;)}
  • 4. Best practices in CSS1)Global reset style sheet usage2)Typography (95% of web design )3)Sprites4)Table Striping (Zebra Stripes) .. etc
  • 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. 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. Sass features1)Nesting (Code link)2)Variables ,Interpolations, Operators andFunctions (Code link)3)Mixins, Arguments (Code link)4)Imports (Code link)5)Partials
  • 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. 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. 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. 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. References1)http://sass-lang.com/tutorial.html2)http://compass-style.org/3)http://mhs.github.com/scout-app/