Discovering CSS preprocessor

- https://github.com/MoOx/Path-Menu/blob/gh-pages/sass/menu.scss#L46
- http://sass-lang.com/
- http://lesscss.org/
- http://learnboost.github.io/stylus/
- http://sass-lang.com/documentation/Sass/Script/Functions.html
- https://github.com/MoOx/compass-recipes/blob/master/stylesheets/recipes/background/_gradients.scss
- https://github.com/MoOx/compass-recipes/blob/master/stylesheets/recipes/ui/_tooltip.scss
- https://github.com/MoOx/compass-recipes/blob/master/templates/icon-fonts/README.md
- https://gist.github.com/MoOx/2793699
- https://github.com/MoOx/compass-recipes
- https://twitter.com/MoOx

Transcript

1. SASS & COMPASS
   ABSTRAIRE SES CSS À COUP DE
   PRÉ-PROCESSEURS
   1
   

   View Slide

2. C'EST QUOI UN PRÉ
   PROCESSEUR CSS ?
   Un pré-processeur CSS... Ben, c'est comme si tu mets
   des petites roues à ton vélo, sauf que quand tu les
   mets, ben ça transforme ton vélo en Poney.
   Donc du coup, tes stylesheets elles roxent grâve sa
   maman.
   - /
   Maxime Thirouin @MoOx
   2
   

   View Slide

3. POURQUOI ?
   ... Réutilisation assez difficile.
   Suffit de voir les "frameworks" CSS
   Twitter Bootstrap utilise un pré-processeur
   3 . 1
   

   View Slide

4. C'EST TOUT ?
   ... Sensation d'être bridé d'un point de vue de la
   syntaxe ?
   Pas de math
   Pas de variable
   ...
   3 . 2
   

   View Slide

5. MAIS ENCORE ?
   Organisation et industrialisation difficile.
   3 . 3
   

   View Slide

6. PRÉ PROCESSEUR ?
   Souplesse avec les $variables
   Vive les Maths
   Réutilisation: @mixin et @function
   Organisation: partials et @import évolué
   Optimisation: @extend pour rester DRY
   !
   4
   

   View Slide

7. FAMOUS PRE-PROCESSORS
   Sass (+Scss)
   Less
   Stylus
   5
   

   View Slide

8. LEQUEL CHOISIR ?
   1. Less est vieillissant et a peu de features
   2. Stylus n'est pas assez mature
   3. Sass a du bouchon et Compass !
   6
   

   View Slide

9. CSS
   7 . 1
   

   View Slide

10. SASS
    7 . 2
    

    View Slide

11. SASS + COMPASS
    7 . 3
    

    View Slide

12. CODE ?
    SCSS - SASSY CSS (.SCSS)
    .hentry {
    margin­left: 2em;
    .title {
    font: {
    size: 2em;
    weight: bold;
    }
    }
    }
    8
    

    View Slide

13. CODE ?
    INDENTED SASS (.SASS)
    .hentry
    margin­left: 2em
    .title
    font
    size: 2em
    weight: bold
    9
    

    View Slide

14. NESTING
    .parent {
    property: value;
    .child {
    property: value
    }
    }
    .parent { property: value }
    .parent .child { property: value }
    10
    

    View Slide

15. PARENT SELECTOR
    .class {
    &:hover { }
    .modernizr­class & {}
    }
    .class { }
    .class:hover { }
    .modernizr­class .class { }
    11
    

    View Slide

16. MEDIA BUBBLING
    $widthGap: 600px; // variable !
    .sidebar {
    @media (min­width: $widthGap) {
    float: left;
    background: url(image.png);
    @media (min­resolution: 2ddpx) {
    background: url(image@2x.png);
    }
    }
    }
    12
    

    View Slide

17. @EXTEND
    .button { }
    .button­delete {}
    ...
    13
    

    View Slide

18. @EXTEND + %PLACEHOLDER :
    C'EST D'LA BOMB'
    %button { }
    .button­info { @extend %button }
    .button­delete { @extend %button }
    .button­valid { @extend %button }
    ...
    .button­info, .button­delete, .button­valid { }
    .button­info { }
    .button­delete { }
    .button­valid { }
    14
    

    View Slide

19. @IMPORT (REVU ET CORRIGÉ)
    @import "normalize";
    @import "grid";
    @import "typography";
    .page­account {
    @import "pages/account";
    }
    15
    

    View Slide

20. LES MATHS
    DIVISION, CAS SPÉCIAL
    1em + 1em; // 2em
    1em ­ 1em; // 0em
    1in + 72pt; // 2in
    6px * 4; // 24px
    18 % 5; // 3
    font : 18px / 1.45em; // 18px/1.45em
    font : (20px / 5); // 4px
    font : 20px / 5 + 1; // 5px
    font : $base / 5; // 4px
    $size : 20px / 5; // 4px
    16
    

    View Slide

21. LES FONCTIONS
    percentage(13/25) // 52%
    round(2.4) // 2
    ceil(2.2) // 3
    floor(2.6) // 2
    abs(­24) // 24
    Listes des Fonctions Sass
    17
    

    View Slide

22. CONDITIONS
    RELATIONAL OPERATORS (<,>, <=,>=)
    COMPARISON OPERATORS (==, !=)
    1 < 20 // true
    10 <= 20 // true
    4 > 1 // true
    4 >= 1 // true
    1 + 1 == 2 // true
    small != big // true
    #000 == black // true
    18
    

    View Slide

23. CONDITIONS DIRECTIVES
    @IF, @ELSE
    MAIS AUSSI @WHILE, @EACH, @FOR
    $theme: ocean;
    div {
    @if $theme == dusty {
    background: #c6bba9;
    color: $color;
    } @else if $theme == ocean {
    background: blue;
    color: white;
    }
    box­shadow: 0 2px 0 if($theme == ocean, #c6bba9, #000); // i
    }
    19
    

    View Slide

24. TOUJOURS PLUS DE FONCTIONS
    Functions pour manipulers les couleurs, sortir des
    valeurs
    Functions custom en Sass ou Ruby
    20
    

    View Slide

25. LES MIXINS
    Produisent de la sortie CSS
    ex: -
    @mixin position($position, $top: null, $right: null, $bottom:
    {
    position: $position;
    top: $top;
    right: $right;
    bottom: $bottom;
    left: $left;
    }
    .fixed­header {
    @include position(absolute, 0, $left: 0, $right: 0);
    }
    gradient tooltip
    21
    

    View Slide

26. COMPASS
    HUGE Mixin library
    More Sass functions
    Extensions
    22
    

    View Slide

27. COMPASS FUNCTIONS
    adjust­lightness, scale­lightness
    adjust­saturation, scale­saturation
    image­url
    image­height
    image­width
    inline­image
    font­url
    inline­font­files
    pi
    sin
    cos
    tan
    more...
    23
    

    View Slide

28. COMPASS MIXINS
    ELEMENT STYLES
    Links, Lists, Float, Tables, Text
    GENERAL UTILITIES
    Browser Hacks, Clearfixes, Resets
    DESIGN PATTERNS
    Tag Cloud, Sticky footer, Vertical rhythm
    CSS3
    24
    

    View Slide

29. PLUGINS & EXTENSIONS
    › Fancy Buttons, Sassy Buttons - easy CSS3 buttons
    › Animate - CSS3 animation library
    › RGBApng - Generate alpha pngs from Sass
    › Compass Magick - Render CSS3 Gradients to png
    › Many more...
    25
    

    View Slide

30. REMEMBER ?
    26 . 1
    

    View Slide

31. COMPASS RECIPES
    COMPASS, BUT ANGRY !
    26 . 2
    

    View Slide

32. COMPASS RECIPES
    27 . 1
    

    View Slide

33. COMPASS RECIPES
    Layouts, Vertical centering and box layout shortcuts.
    Media Queries, Shortcuts for media queries.
    Shadows, A wide collection of shadows which use
    pseudo elements to create fold effects, etc.
    Shapes, Geometric and iconic shapes, created only
    with CSS
    UI components, Lots of element styling for loader,
    menu, overlay, separator, tooltip, etc.
    Utilities, Very usefull utilities, trick, hacks
    27 . 2
    

    View Slide

34. STELLAR LINKS
    More links
    My Compass Recipes
    Follow me on Twitter
    28
    

    View Slide

35. THE END
    BY @MOOX / MAXIME THIROUIN /
    MOOX.IO
    29
    

    View Slide