Gagnez en productivité avec les préprocesseurs CSSPierre-Emmanuel Fringanthttp://www.formation-cakephp.com@pefringant

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

Métalangages

SassScss

Less Stylus

Organisation, imports● Fractionnement libre des fichiers● Composants réutilisables● Import :

● Un seul fichier CSS au final

sass/

partials/

_forms.scss

_pagination.scss

@import "partials/forms";@import "partials/pagination";

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

Variables$mainColor: #0088CC;

h1 {color: $mainColor;

}

Variables$mainColor: #0088CC;

h1 {color: $mainColor;

}

h2 {color: lighten($mainColor, 15%);

}

Variables$mainColor: #0088CC;

h1 {color: $mainColor;

}

h2 {color: lighten($mainColor, 15%);

}

h2 {color: #1AB2FF;

}

Variables et opérations$siteWidth: 960px;$contentWidth: 500px;$sidebarWidth: 220px;

#wrapper {width: $siteWidth;

}#content {

width: $contentWidth;}#sidebar {

width: $sidebarWidth;}#extra {

width: $siteWidth - $contentWidth - $sidebarWidth;}

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

}}

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

Mixins@mixin border-radius {

-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;

}

.box {border: 1px solid invert($mainColor);@include border-radius;

}

Mixins.box {

border: 1px solid #ff7733;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;

}

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

}

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

}

Héritage%alert {

font: {size: 2em;weight: bold;

}}

.notice {@extend %alert;color: orange;

}

.error {@extend %alert;color: red;

}

Héritage.notice, .error {

font-size: 2em;font-weight: bold;

}

.notice {color: orange;

}

.error {color: red;

}

Media queries.sidebar {

width: 300px;@media screen and (orientation: landscape) {

width: 500px;}

}

Media queries@media screen and (orientation: landscape) {

.sidebar { width: 500px;

}}

...

.sidebar {width: 300px;

}

Mixins :● Reset● CSS3● Maintenance des sprites● Typographie (rythme vertical)● ...Communauté nombreuse et active :● Plugins

Compass : spritesimages/

actions/

new.pngedit.pngsave.pngdelete.png

@import "actions/*.png";@include all-actions-sprites;

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

Susy● Grille pour Compass● Responsive

Twitter Bootstrap● Feuille de style complète fournie● Fichiers sources en .less● Maintenu par Twitter et la communauté● Traduit en sass/scss

Des questions ?pierre.fringant@gmail.comhttp://www.formation-cakephp.com@pefringant