Gagnez en productivité avec les préprocesseurs CSS

Présentation des métalangages qui permettent d'étendre le langage CSS en lui apportant les mêmes fonctionnalités qu'un langage de programmation. Revue des différentes solutions de préprocessing, leurs avantages et les outils associés.

Transcript

1. Gagnez en productivité avec les préprocesseurs CSS Pierre-Emmanuel Fringant http://www.formation-cakephp.com @pefringant
2. Préprocesseur CSS ? • Tourne en tâche de fond • Analyse des scripts en métalangage • Affiche les éventuelles erreurs • Produit un fichier CSS • Plusieurs environnements possibles
3. Métalangages Sass Scss Less Stylus
4. Organisation, imports • Fractionnement libre des fichiers • Composants réutilisables • Import : • Un seul fichier CSS au final scss/ partials/ _forms.scss _pagination.scss @import "partials/forms"; @import "partials/pagination";
5. Imbrication Attention aux sélecteurs trop longs : .gallery { ul { li { line-height: 70px; margin-right: 20px; a { display: block; img { ... .gallery ul li a img {... SCSS CSS
6. Variables $mainColor: #0088CC; h1 { color: $mainColor; } SCSS
7. Variables $mainColor: #0088CC; h1 { color: $mainColor; } h2 { color: lighten($mainColor, 15%); } SCSS
8. Variables $mainColor: #0088CC; h1 { color: $mainColor; } h2 { color: lighten($mainColor, 15%); } h2 { color: #1AB2FF; } SCSS CSS
9. Variables et opérations $siteWidth: 960px; $contentWidth: 500px; $sidebarWidth: 220px; #wrapper { width: $siteWidth; } #content { width: $contentWidth; } #sidebar { width: $sidebarWidth; } #extra { width: $siteWidth - $contentWidth - $sidebarWidth; } SCSS
10. Référence au sélecteur parent #report td { font-size: 14px; &:first-child { width: 100%; } &:not(first-child) { white-space: nowrap; } a { color: blue; &:hover { text-decoration: underline; } } } SCSS
11. Référence au sélecteur parent #report td { font-size: 14px; } #report td:first-child { width: 100%; } #report td:not(first-child) { white-space: nowrap; } #report td a { color: blue; } #report td a:hover { text-decoration: underline; } CSS
12. Mixins @mixin border-radius { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .box { border: 1px solid invert($mainColor); @include border-radius; } SCSS
13. Mixins .box { border: 1px solid #ff7733; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } CSS
14. Mixins Avec paramètre(s) @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .big-box { @include border-radius(16px); } SCSS
15. Mixins Paramètre par défaut @mixin border-radius($radius: 10px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .standard-box { @include border-radius(); } SCSS
16. Héritage %alert { font: { size: 2em; weight: bold; } } .notice { @extend %alert; color: orange; } .error { @extend %alert; color: red; } SCSS
17. Héritage .notice, .error { font-size: 2em; font-weight: bold; } .notice { color: orange; } .error { color: red; } CSS
18. Media queries .sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; } } SCSS
19. Media queries @media screen and (orientation: landscape) { .sidebar { width: 500px; } } ... .sidebar { width: 300px; } CSS
20. Mixins : • Reset • CSS3 • Maintenance des sprites • Typographie (rythme vertical) • ... Communauté nombreuse et active : • Plugins
21. Compass : sprites images/ actions/ new.png edit.png save.png delete.png @import "actions/*.png"; @include all-actions-sprites; SCSS
22. Compass : sprites .actions-sprite, .actions-delete, .actions-edit, .actions-new, .actions-save { background: url('/images/actions-s34fe0604ab.png') no- repeat; } .actions-delete { background-position: 0 0; } .actions-edit { background-position: 0 -32px; } .actions-new { background-position: 0 -64px; } .actions-save { background-position: 0 -96px; } CSS
23. Susy • Grille pour Compass • Responsive
24. Twitter Bootstrap • Feuille de style complète fournie • Fichiers sources en .less • Maintenu par Twitter et la communauté • Traduit en sass/scss
25. Des questions ? pierre.fringant@gmail.com http://www.formation-cakephp.com @pefringant