Uploaded on

All you need to know about Compass and Sass.

All you need to know about Compass and Sass.

More in: Technology
  • 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
260
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
7
Comments
0
Likes
1

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 & Sass What’s that?
  • 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. Why I need to use Compass? • Framework CSS • CSS3 • Browsers compatibility • Cleaner markup • Best reusable patterns
  • 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. Controle directives • @for • @if • @each • @while
  • 6. Rules and directives • @media • @screen • @extend • @debug • @warn
  • 7. Mixin directives • Compass mixins • Create your own mixins • Rewrite a compass mixin
  • 8. Function directives • Create your own function like a mixin but with a return value
  • 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. Good practices • Files structure • Write your own custom mixins • Nest selectors, but not too much
  • 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. Write your own custom mixins @mixin button($backgroundColor, $color){ background-color: $backgroundColor; color: $color; margin: 0; padding: 0; @include border-radius(5px); }
  • 13. Nest selectors, but not too much • Up to 5 • On per wrap component
  • 14. Foundation • Front-End Framework • Compass project • Concurrent to Bootstrap • Easy to use • Design • Javascript components
  • 15. Bottom • Three days of development • Using compass • NPM Package • Command Line Interface • https://github.com/tonymx227/bottom