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
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