About me ?

Lead Frontend developer @ 

Thomas Roux

+

@spartdev

What is a preprocessor ?

What is a Preprocessor ?

• The answer is in the name

• Preprocessors take code written in the preprocessed language and then convert that code into CSS

Famous
preprocessors

Why use a preprocessor ?

Why use a preprocessor ?

• More productivity
• Maintainable CSS
• CSS has its limitations
• Variables 
• Mixins
• Functions
• Partials

Sass

Sass

Born in ruby on rails community

Designed by Hampton Catlin 

Maintained by Nathan Weizenbaum et Chris Eppstein 

How Do Sass Work?

Write your sass script

Preprocess

Generated css

Before install it !

Install Ruby

Install Sass Ruby Gem

+

Then use it !

sass --watch <source>:<destination>

• sass input.scss output.css
• sass --watch input.scss:output.css
• sass --watch input.scss:output.css --style compressed

.sass

• Haml-style indentation
• No brackets
• No semi-colons
• Based on indentation

.scss

• Semi-colon and bracket syntax
• Normal css is also valid scss
• Recomanded

2 available syntaxes

.sass

.scss

2 available syntaxes

.main
    font-size: 10px
    margin: 5px
    text-align: center
    
label
    color: green

.main {
    font-size: 10px;
    margin: 5px;
    text-align: center;
}
    
label {
    color: green;
}

Features 

7 Principal features 

1. Variables
2. Nesting
3. Mixins
4. Function
5. Operators
6. Partial
7. Extend Directive

Variables

Variables

Variables allow you to assign a value and reuse them anywhere !

Can assign boolean, color, text, string …

// Assign Variables
$font-stack: Helvetica, sans-serif;
$primary-color: #333;


// Use it
body {
    font: 100% $font-stack;
    color: $primary-color;
}

body {
    font: 100% Helvetica, sans-serif;
    color: #333;
}

Sass

Css

Compile phase

Nesting

Nesting

.nav.tabbed-navigation {...}
.nav.tabbed-navigation a {...}
.nav.tabbed-navigation a span {...}

• Hard to read
• Multiple line
• Descendant selectors dependence

If .nav class change you will have to rewrite the three CSS selectors...

Nesting

.nav {
    margin: 10px;
    .tabbed-navigation {
        padding: 5px;
        width: 20%;
        a {
            font-size: 1,8rem;
            color: red;
            span {
                color: green;
            }
        }
    }
}

Clear hierarchy

Mixins

Mixins

• Define styles then reuse !
• You can pass params

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
       -moz-border-radius: $radius;
        -ms-border-radius: $radius;
            border-radius: $radius;
}

.myClassname {
    @include border-radius(10px);
}

.myClassname {
    -webkit-border-radius: 10px;
       -moz-border-radius: 10px;
        -ms-border-radius: 10px;
            border-radius: 10px;
}

Sass

Css

Compile phase

Function

Function

function shade($color + $percent) {
    @return mix(#000, $color, $percent);
}

body {
    background: shade(grey, 50%);
}

Function

Native Functions...

• quote
• unquote
• percentage
• lenght
• nth
• unit
• unitless
• mix
• ....

Operators

Operators

• Numbers (1.2, 15, 50px)
• Strings (foo, bar, baz)
• Colors (red, #04A3F9, rgba(255,255,0,15)...)
• Booleans (true, false)

body {
    font-size: 1px + 10px +3px; // 14px
    background-color: #777 + #888 // white
}

.myDivClass {
    height: (1000px/2) // 500px
}

$var: full;

.mySecondDiv {
    @if $var === full {
        width: 100%;
    } @else {
        width: 50%;
    }
}

Partials

Partials

Load different modules to make css !

Partials

@import '_header';
@import '_page';
@import '_sidebar';

Extend Directive

Extend Directive

You can share css declaration with @extend

.error {
    color: red;
}
.serious-error {
    @extend .error;
    font-weight: bold;
}

.error, .serious-error {
    color: red;
}
.serious-error {
    font-weight: bold;
}

Sass

Css

Compile phase

Sass ressources

• http://sass-lang.com/
• http://thesassway.com/
• http://sassmeister.com/
• http://sass-guidelin.es/
• http://hugogiraudel.com/blog/

Thanks !