Les pré-processeurs CSS Dereck, Eric, Jessy et Paola

Plan de la présentation Introduction Pré-processeurs, qu’est-ce que c’est ? Pré-processeurs CSS SCSS LESS Conclusion

Introduction … pour introduire Jessy

Les pré-processeurs Qu’est-ce que c’est ? Jessy

Les pré-processeurs Un programme intermédiaire qui reçoit des données qui doivent être interprété et transformé en des données pouvant servir à un autre logiciel Peut être comparé à PHP Jessy

Pré-processeurs CSS cess… css… ssssssss... Jessy & Paola

Donc un pré-processeurs CSS : Permet de coder dans un autre langage Souvent inspiré du CSS Générer le CSS Jessy

Permet d’aller au-delà des limitations du CSS Variables Classes Pré-processeurs CSS Pourquoi s’en servir ? Permet d’aller au-delà des limitations du CSS Variables Classes Équations mathématiques Imbrication de code Paola

Pré-processeurs CSS D’autres Les plus populaires CSS-Crush Myth Rework Les différents pré-processeurs CSS existant Les plus populaires D’autres CSS-Crush Myth Rework Clay DtCSS Switch CSS et plus encore... Paola

SCSS Sassy CSS Éric

Définition Sass 3.0 a introduit une nouvelle syntaxe, plus proche de CSS, appelée SCSS. SCSS est un “métalangage” de CSS, ce qui signifie que tout ce qui est valide en CSS l’est aussi en SCSS.

Installer et utiliser Ruby doit être installé sur votre système Il suffit de lancer la commande suivante dans votre terminal : gem install sass Créer le fichier : style.scss Nous allons maintenant générer la feuille de style CSS à partir du fichier style.scss: sass style.scss:style.css À chaque fois qu’on fait des modifications dans le fichier scss il faut lancer la commande (pour prendre en compte les modifications dans le fichier css): sass --watch style.scss:style.css

Variables Particularités Mixins Sélecteurs Heritage Importation de fichier $colorLink: #aa33dd; $paddingLink: 10px; $imagePath: "../../img/"; a { display: block; padding: $paddingLink; color: $colorLink; background: url($imagePath+'mon-image.png') left top scroll no-repeat; }

Mixins Particularités Variables Sélecteurs Heritage SCSS @mixin border-radius { -moz-border-radius: 5px; border-radius: 5px; } article { @include border-radius; } aside { @include border-radius; } CSS article { aside { Variables Mixins Sélecteurs Heritage Importation de fichier

Sélecteurs Particularités Variables Mixins Heritage SCSS article { > h1 { font-size: 1.2em; border-bottom: 1px dashed #ccc; } + footer { border-top: 1px dashed #ccc; } ~ article { margin-top: 1.5em; } * { color: #000; } } CSS article > h1 { font-size: 1.2em; border-bottom: 1px dashed #ccc; } article + footer { border-top: 1px dashed #ccc; } article ~ article { margin-top: 1.5em; } article * { color: #000; } Variables Mixins Sélecteurs Heritage Importation de fichier

Héritage Particularités Variables Mixins Sélecteurs .radius { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } .button { @extend .radius; } .icon { @extend .radius; } .box { @extend .radius; } Variables Mixins Sélecteurs Héritage Importation de fichier

Importation de fichier Particularités /* fichier layout.scss */ .page { width: 960px; margin: 0 auto; } /* fichier style.scss */ @import 'layout.css'; .page h1 { font-size: 1.5em; } Variables Mixins Sélecteurs Héritage Importation de fichier

LESS pour en faire plus ;-) Dereck

Définition Less est un pré-processeur CSS. C’est à dire qu’il ajoute des fonctionnalités au CSS déja existant. Permet de rendre le CSS plus facile à maintenir, à modifier et à faire évoluer.

Façons de l’utiliser Console On installe LESS sur la machine. On appelle les fonctions LESS et les différentes composantes via la ligne de commande. $ lessc styles.less styles.css $ lessc --clean-css styles.less styles.min.css Dans le code CSS On ajoute LESS directement dans le code. On appelle les fonctions LESS et les différentes composantes à travers le CSS. var less = require('less'); less.render('.class { width: (1 + 1) }', function (e, output) { console.log(output.css); });

Droits d’utilisation Apache Version 2.0 License Permet: Télécharger et utiliser librement Less.js Utiliser Less.js dans des distributions que l’on crée et distribue Empêche: Redistribuer n’importe quelle partie de Less.js sans mentionner les origines. Requis: Inclure une copie de la license dans chacune des distributions Clairement indiqué que Less.js provient de “The Less Core Team”

Variables Particularités Extend Import options CSS guards (IF) Loops (FOR) Merge @link-color: #428bca; // sea blue @link-color-hover: darken(@link-color, 10%); // Usage a, .link { color: @link-color; } a:hover { color: @link-color-hover; } .widget { color: #fff; background: @link-color; }

Extend Particularités Variables Import options CSS guards (IF) Loops (FOR) Merge Ceci en less: nav ul { &:extend(.inline); background: blue; } .inline { color: red; } Donne ceci en CSS: nav ul { background: blue; } .inline, nav ul { color: red; }

Import options Particularités Variables Extend CSS guards (IF) Loops (FOR) Merge Syntax: @import (keyword) "filename"; reference: use a Less file but do not output it inline: include the source file in the output but do not process it less: treat the file as a Less file, no matter what the file extension css: treat the file as a CSS file, no matter what the file extension once: only include the file once (this is default behavior) multiple: include the file multiple times optional: continue compiling when file is not found

CSS guards (IF) Particularités Variables Extend Import options Loops (FOR) Merge button when (@my-option = true) { color: white; }

Loops (FOR) Particularités Variables Extend Import options CSS guards (IF) Loops (FOR) Merge .loop(@counter) when (@counter > 0) { .loop((@counter - 1)); // next iteration width: (10px * @counter); // code for each iteration } div { .loop(5); // launch the loop }

Merge Particularités Variables Extend Import options CSS guards (IF) Permet de concaténer plusieurs propriétés séparées par une virgule ou un espace. .mixin() { box-shadow+: inset 0 0 10px #555; } .myclass { .mixin(); box-shadow+: 0 0 20px black; } .myclass { box-shadow: inset 0 0 10px #555, 0 0 20px black; } Variables Extend Import options CSS guards (IF) Loops (FOR) Merge

Conclusion … pour conclure Paola

Sitepoint Vanseodesign Base22 Webnet La-cascade Seemios-blog LessCss Sources Sitepoint Vanseodesign Base22 Webnet La-cascade Seemios-blog LessCss Less Wikipédia