Présentation des préprocesseurs CSS (Sass/Scss, Less, Stylus) et leurs apports au langage CSS de base.

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 Less Stylus
Scss

4. Organisation, imports
● Fractionnement libre des fichiers
● Composants réutilisables
● Import :
sass/
partials/
_forms.scss
_pagination.scss
@import "partials/forms";
@import "partials/pagination";
● Un seul fichier CSS au final

5. Imbrication
.gallery {
ul {
li {
line-height: 70px;
margin-right: 20px;
a {
display: block;
img {
...
Attention aux sélecteurs trop longs :
.gallery ul li a img {...

6. Variables
$mainColor: #0088CC;
h1 {
color: $mainColor;
}

7. Variables
$mainColor: #0088CC;
h1 {
color: $mainColor;
}
h2 {
color: lighten($mainColor, 15%);
}

8. Variables
$mainColor: #0088CC;
h1 {
color: $mainColor;
}
h2 {
color: lighten($mainColor, 15%);
}
h2 {
color: #1AB2FF;
}

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

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

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

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

13. Mixins
.box {
border: 1px solid #ff7733;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

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);
}

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();
}

16. Héritage
%alert {
font: {
size: 2em;
weight: bold;
}
}
.notice {
@extend %alert;
color: orange;
}
.error {
@extend %alert;
color: red;
}

17. Héritage
.notice, .error {
font-size: 2em;
font-weight: bold;
}
.notice {
color: orange;
}
.error {
color: red;
}

18. Media queries
.sidebar {
width: 300px;
@media screen and (orientation: landscape) {
width: 500px;
}
}

19. Media queries
@media screen and (orientation: landscape) {
.sidebar {
width: 500px;
}
}
...
.sidebar {
width: 300px;
}

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;

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

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