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

Présentation au sujet: "Les pré-processeurs CSS Dereck, Eric, Jessy et Paola"— Transcription de la présentation:

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

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

3 Introduction … pour introduire Jessy

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

5 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

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

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

8 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

9 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

10 SCSS Sassy CSS Éric

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

12 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

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

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

15 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

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

17 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

18 LESS pour en faire plus ;-)
Dereck

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

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

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

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

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

24 Import options Particularités Variables Extend CSS guards (IF)
Loops (FOR) Merge (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

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

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

27 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 px #555; } .myclass { .mixin(); box-shadow+: px black; } .myclass { box-shadow: inset px #555, px black; } Variables Extend Import options CSS guards (IF) Loops (FOR) Merge

28 Conclusion … pour conclure Paola

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