Presentation on Compass n Sass

1. Compass-n-Sass
-- Pradeep S

2. CSS
Css is a stylesheet language used for
describing presentation semantics
The style sheet with the highest priority controls
the content display. Declarations not set in the
highest priority source are passed on to a
source of lower priority, such as the user agent
style. This process is called cascading.

3. CSS & CSS3
Rule:
Selector (#id)
{
style declaration
(border-radius:4px;)
vendor specific style declaration (-moz-border-
radius:4px;)
}

4. Best practices in CSS
1)Global reset style sheet usage
2)Typography (95% of web design )
3)Sprites
4)Table Striping (Zebra Stripes) .. etc

5. Limitations
Css has following drawbacks:
1)Variables and functions cannot be declared
to reduce the redundancy in declarations
2)Need a standard compression mechanism
3)Need to depend on web designers for sprite
images and setting the position of images
Compass n Sass helps us in solving the above
drawbacks

6. Sass
Sass is a language,It is an extension of CSS3
to create better stylesheets with less effort
All Sass files end with extension *.scss
Sass
*.scss Engine *.css

7. Sass features
1)Nesting (Code link)
2)Variables ,Interpolations, Operators and
Functions (Code link)
3)Mixins, Arguments (Code link)
4)Imports (Code link)
5)Partials

8. Compass
Compass is a framework. Its a framework of
patterns and best practices written in Sass to
solve common stylesheet problems
Compass
*.scss *.css
Sass Engine

9. Installing Compass n Sass
1)Install Ruby.
2) "gem install sass" to install sass
3) "gem install compass" to install compass
4) "compass create" to create web
development directory
5)"compass watch" to create the css files
dynamically with changes made in the scss
files

10. Compass features
1)Inbuilt CSS reset stylesheet
2)Inbuilt CSS3 Mixins
3)Inbuilt Typography Mixin and much more like
table helpers
4)Sprite mixins (code link)
5)Built in CSS Compression

11. Compass prerequisite
No need to be a Ruby Dev, knowledge of
configuring config.rb file should is must.
Tips on config.rb file:
1)sass_dir -- directory of sass files
2)images_dir -- directory of images
3)css_dir -- directory of the css files
4)output_style -- style for the compiled css files
Scout App http://mhs.github.com/scout-app/
provides UI for configuring the directories

12. References
1)http://sass-lang.com/tutorial.html
2)http://compass-style.org/
3)http://mhs.github.com/scout-app/