compass & sass

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