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