Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Discovering CSS preprocessor

Discovering CSS preprocessor

8607d86bc3aad23fbcaabf27d4295b4c?s=128

Maxime Thirouin

September 19, 2012
Tweet

Transcript

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

    1
  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
  3. POURQUOI ? ... Réutilisation assez difficile. Suffit de voir les

    "frameworks" CSS Twitter Bootstrap utilise un pré-processeur 3 . 1
  4. C'EST TOUT ? ... Sensation d'être bridé d'un point de

    vue de la syntaxe ? Pas de math Pas de variable ... 3 . 2
  5. MAIS ENCORE ? Organisation et industrialisation difficile. 3 . 3

  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
  7. FAMOUS PRE-PROCESSORS Sass (+Scss) Less Stylus 5

  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
  9. CSS 7 . 1

  10. SASS 7 . 2

  11. SASS + COMPASS 7 . 3

  12. CODE ? SCSS - SASSY CSS (.SCSS) .hentry { margin­left:

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

    size: 2em weight: bold 9
  14. NESTING .parent { property: value; .child { property: value }

    } .parent { property: value } .parent .child { property: value } 10
  15. PARENT SELECTOR .class { &:hover { } .modernizr­class & {}

    } .class { } .class:hover { } .modernizr­class .class { } 11
  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
  17. @EXTEND .button { } .button­delete {} <a class="button button­delete">... 13

  18. @EXTEND + %PLACEHOLDER : C'EST D'LA BOMB' %button { }

    .button­info { @extend %button } .button­delete { @extend %button } .button­valid { @extend %button } <a class="button­XXXX">... .button­info, .button­delete, .button­valid { } .button­info { } .button­delete { } .button­valid { } 14
  19. @IMPORT (REVU ET CORRIGÉ) @import "normalize"; @import "grid"; @import "typography";

    .page­account { @import "pages/account"; } 15
  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
  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
  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
  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
  24. TOUJOURS PLUS DE FONCTIONS Functions pour manipulers les couleurs, sortir

    des valeurs Functions custom en Sass ou Ruby 20
  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
  26. COMPASS HUGE Mixin library More Sass functions Extensions 22

  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
  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
  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
  30. REMEMBER ? 26 . 1

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

  32. COMPASS RECIPES 27 . 1

  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
  34. STELLAR LINKS More links My Compass Recipes Follow me on

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