$30 off During Our Annual Pro Sale. View Details »

Discovering CSS preprocessor

Discovering CSS preprocessor

Maxime Thirouin

September 19, 2012
Tweet

More Decks by Maxime Thirouin

Other Decks in Technology

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([email protected]
    }
    }
    }
    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