Compass & sass

363
-1

Published on

All you need to know about Compass and Sass.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
363
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Compass & sass

  1. 1. Compass & Sass What’s that?
  2. 2. Contents • Why I have to use Compass and Sass? • Sass & Scss • Controle directives • Rules and directives • Mixin directives • Function directives • Configuration file • Good practices • Foundation • Bottom
  3. 3. Why I need to use Compass? • Framework CSS • CSS3 • Browsers compatibility • Cleaner markup • Best reusable patterns
  4. 4. Sass & Scss Sass (old) $blue: #3bbfce ! .content-navigation border-color: $blue color: darken($blue, 9%) Scss (new) $blue: #3bbfce; ! .content-navigation { border-color: $blue; color: darken($blue, 9%); }
  5. 5. Controle directives • @for • @if • @each • @while
  6. 6. Rules and directives • @media • @screen • @extend • @debug • @warn
  7. 7. Mixin directives • Compass mixins • Create your own mixins • Rewrite a compass mixin
  8. 8. Function directives • Create your own function like a mixin but with a return value
  9. 9. Configuration file • Output style (output_style) • • :nested (default) • :compressed • • :expanded :compact Directories • • css_dir • sass_dir • images_dir • • http_path javascripts_dir Line comments (line_comments) • true • false
  10. 10. Good practices • Files structure • Write your own custom mixins • Nest selectors, but not too much
  11. 11. Files structure /projectname /sass /projectname /components _header.scss _section.scss _footer.scss _mixins.scss _settings.scss app.scss /images /stylesheets /javascripts app.scss @import “projectname/header”, “projectname/section”, “projectname/footer”;
  12. 12. Write your own custom mixins @mixin button($backgroundColor, $color){ background-color: $backgroundColor; color: $color; margin: 0; padding: 0; @include border-radius(5px); }
  13. 13. Nest selectors, but not too much • Up to 5 • On per wrap component
  14. 14. Foundation • Front-End Framework • Compass project • Concurrent to Bootstrap • Easy to use • Design • Javascript components
  15. 15. Bottom • Three days of development • Using compass • NPM Package • Command Line Interface • https://github.com/tonymx227/bottom
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×