No content

QU’EST-CE QU’UN PRÉPROCESSEUR CSS? C’est un outil permettant de transformer un langage (avec une syntaxe semblable à CSS), en CSS valide. La syntaxe du langage est souvent tellement proche de celle du CSS qu’on voit à peine la différence. Les préprocesseurs apportent une aide à l’écriture de vos feuilles de style. Aujourd’hui, les deux préprocesseurs les plus utilisés sont Sass et Less. 

LES PRÉPROCESSEURS LES PLUS UTILISÉS SASS Foundation Compass Bourbon 

LES PRÉPROCESSEURS LES PLUS UTILISÉS LESS Twitter Bootstrap LESS Elements LESS Hat 

LES PRÉPROCESSEURS LES PLUS UTILISÉS STYLUS Nib 

IMPORTATION (@IMPORT) Éviter la règle CSS “@import’’ Le “@import” des fichiers .scss se produit lors de la compilation au lieu du coté client. 

IMPORTATION (@IMPORT) SUITE / * i m p o r t s a n s l e " _ " * / @ i m p o r t " l e _ f i c h i e r _ i m p o r t e " ; / * i m p o r t a v e c l e " _ " * / @ i m p o r t " _ l e _ f i c h i e r _ i m p o r t e " ; 

IMPORTATION (@IMPORT) SUITE DIFFÉRENCE ENTRE LES DEUX FAÇONS D'IMPORTER importer un fichier sans le "_" indique que ce fichier doit être généré en .css importer un fichier avec le "_" indique que ce fichier doit être importé dans le fichier compilé 

IMPORTATION (@IMPORT) SUITE @IMPORT DANS UN SÉLECTEUR . m a c l a s s { @ i m p o r t " _ l e _ f i c h i e r _ i m p o r t e " ; } 

IMBRIQUATION IMBRIQUATION DES SELECTEURS Les selecteurs CSS peuvent être imbriqués. IMBRIQUATION DES PROPRIÉTÉS Certaines propriétés avec le même nom peuvent être imbriquées LE SELECTEUR PARENT L’utilisation du symbole “&” fait référence au parent. 

IMBRIQUATION (SUITE) IMBRIQUATION DES SÉLECTEURS . m a - c l a s s e - p a r e n t { . m a - c l a s s e - e n f a n t { s t r o n g { c o l o r : b l a c k ; } } } / * C S S G É N É R É * / . m a - c l a s s - p a r e n t . m a - c l a s s - e n f a n t s t r o n g { c o l o r : b l a c k ; } * Ne pas dépasser 3 niveaux d'imbriquation 

NESTING (IMBRIQUATION) À NE PAS FAIRE . m a - c l a s s e - p a r e n t { . m a - c l a s s e - e n f a n t { s p a n { a { s t r o n g { c o l o r : b l a c k ; } } } } } 

IMBRIQUATION (SUITE) IMBRIQUATION DES PROPRIÉTÉS . m a - c l a s s - p a r e n t { f o n t : { s i z e : 1 2 p x ; w e i g h t : 7 0 0 ; s t y l e : i t a l i c ; } b a c k g r o u n d : { p o s i t i o n : t o p l e f t ; r e p e a t : n o - r e p e a t ; c o l o r : # c c c ; } } / * C S S G É N É R É * / . m a - c l a s s - p a r e n t { f o n t - s i z e : 1 2 p x ; f o n t - w e i g h t : 7 0 0 ; f o n t - s t y l e : i t a l i c ; 

IMBRIQUATION (SUITE) SÉLECTEUR PARENT ( & ) . m a - c l a s s - p a r e n t { . m a - c l a s s e - e n f a n t { . t o u c h & { c o l o r : b l a c k ; } } } / * C S S G É N É R É * / . t o u c h . m a - c l a s s - p a r e n t . m a - c l a s s - e n f a n t { c o l o r : b l a c k ; } * .touch est une fonctionnalité de Modernizr 

IMBRIQUATION (SUITE) SÉLECTEUR :HOVER, :PSEUDO-ELEMENT ( & ) . m a - c l a s s - p a r e n t { . m a - c l a s s e - e n f a n t { & : h o v e r { c o l o r : b l a c k ; } & : f i r s t - c h i l d { c o l o r : r e d ; } } } / * C S S G É N É R É * / . t o u c h . m a - c l a s s - p a r e n t . m a - c l a s s - e n f a n t : h o v e r { c o l o r : b l a c k ; } . t o u c h . m a - c l a s s - p a r e n t . m a - c l a s s - e n f a n t : f i r s t - c h i l d { c o l o r : r e d ; } * .touch est une fonctionnalité de Modernizr 

VARIABLES La façon la plus simple d’utiliser SASS est l’utilisation des variables. Les variables commencent avec le signe “$” et sont déclarés comme des propriétés. “$nom : valeur” Les utilisations les plus fréquentes sont les chiffres, les couleurs et les fonts. 

VARIABLES (SUITE) $ p r i m a r y : # 1 a b c 9 c ; / * t u r q u o i s e * / $ s e c o n d a r y : # 8 E 4 4 A D ; / * e m e r a l d * / $ t e r t i a r y : # 3 4 9 8 d b ; / * p e t e r r i v e r / * $ h o v e r : $ s e c o n d a r y ; $ f a m i l y : ' O p e n s a n s ' , s e r i f ; $ m a r g i n : 1 0 p x 2 0 p x ; 

VARIABLES (SUITE) . m a - c l a s s { $ w i d t h : 1 0 p x ; w i d t h : $ w i d t h ; } Une variable créée dans un sélecteur n'est pas globale, donc ne peut être utilisée pour d'autres sélecteurs. 

@MIXINS DÉFINITION Les mixins servent à définir des styles qui sont utilisés à plusieurs endroits. Les mixins acceptent aussi des arguments, ce qui permet de produire une plus grande variété de styles. Nous utilisons “@mixin” pour définir une mixin. UTILISATION Nous utilisons “@include” pour inclure tous les styles retournés par le mixin. 

@MIXINS (SUITE) @ m i x i n c i r c l e ( $ c i r c l e - s i z e , $ c o l o r ) { w i d t h : $ c i r c l e - s i z e ; h e i g h t : $ c i r c l e - s i z e ; b a c k g r o u n d : $ c o l o r ; @ i n c l u d e b o r d e r - r a d i u s ( $ c i r c l e - s i z e / 2 ) ; } 

@INCLUDE / * A P P E L É L E M I X I N * / . c i r c l e { @ i n c l u d e c i r c l e ( 2 0 0 p x , r e d ) ; } / * C S S G É N É R É * / . c i r c l e { w i d t h : 2 0 0 p x ; h e i g h t : 2 0 0 p x ; b a c k g r o u n d : r e d ; - w e b k i t - b o r d e r - r a d i u s : 1 0 0 p x ; - m o z - b o r d e r - r a d i u s : 1 0 0 p x ; - m s - b o r d e r - r a d i u s : 1 0 0 p x ; - o - b o r d e r - r a d i u s : 1 0 0 p x ; b o r d e r - r a d i u s : 1 0 0 p x ; } 

@EXTEND Nous voulons souvent utiliser les mêmes styles mais avec une légère différence. La façon la plus fréquente est d’utiliser une classe plus spécifique. Avec SASS, la maintenance est beaucoup plus facile et cela permet d’éviter certaines erreurs. Nous utilisons “@extend .classe” pour réutiliser les styles d’un selecteur sans avoir à tout dupliquer. 

@EXTEND (SUITE) EXTEND %PLACEHOLDER % b o r d e r - b o t t o m { p a d d i n g : 0 0 3 0 p x 0 ; b o r d e r - b o t t o m : 2 p x b l u e s o l i d ; } . m a - c l a s s e { @ e x t e n d % b o r d e r - b o t t o m ; } . m o n - a u t r e - c l a s s e { @ e x t e n d % b o r d e r - b o t t o m ; } / * C S S G É N É R É * / . m a - c l a s s e , . m o n - a u t r e - c l a s s e { p a d d i n g : 0 0 3 0 p x 0 ; b o r d e r - b o t t o m : 2 p x b l u e s o l i d } * le placeholder n'est pas compilé dans le .css final 

MATHÉMATIQUES Sass supporte les operateurs standard + - * / % Plusieurs fonctions sont disponibles. percentage, round, ceil, floor, abs, min, max et plusieurs autres. 

MATHÉMATIQUES (SUITE) LES OPÉRATIONS MATHÉMATIQUE (+, -, *, /, %) 1 e m + 1 e m ; / * 2 e m * / 1 e m - 1 e m ; / * 0 e m * / 1 i n + 7 2 p t ; / * 2 i n * / 6 p x * 4 ; / * 2 4 p x / * 1 8 % 5 ; / * 3 * / 

COULEURS Il est possible de faire des calculs avec les couleurs. Les opérations sont appliquées sur le canal rouge, vert et bleu. Plusieurs fonctions sont disponibles dans SASS rgb, rgba, red, green, blue, mix, hue, saturation, lightness, lighten, darken, saturate, desaturate, greyscale, complement, invert, alpha, rgba et plusieurs autres. 

COULEURS (SUITE) LIGHTEN, DARKEN, RGBA . l i g h t e n { b a c k g r o u n d : l i g h t e n ( $ p r i m a r y , 1 0 ) ; } . d a r k e n { b a c k g r o u n d : d a r k e n ( $ p r i m a r y , 1 0 ) ; } . r g b a { b a c k g r o u n d : r g b a ( $ p r i m a r y , 1 0 ) ; } 

COULEURS (SUITE) 

COULEURS (SUITE) 

DIRECTIVES @IMPORT @MEDIA L’utilisation du “@media” query est la même qu’en CSS sauf à l’exception qu’elle peut être imbriquée dans les sélecteurs. @EXTEND @IF Permet d’utiliser des “@if, @else if, @else” pour toutes les directives. 

DIRECTIVES (SUITE) @FOR La déclaration du “@for” compile des styles de manière répétitive avec un compteur pour chaque itération. @EACH Le “@each” compile des styles pour chaque valeurs dans un tableau @WHILE Le “@while” compile des styles jusqu’à ce que l’évalution soit “false” @MIXIN 

DIRECTIVES (SUITE) @IF, @ELSE $ v a r : f a l s e ; @ i f $ v a r = = t r u e { & : b e f o r e { c o l o r : $ s e c o n d a r y ; c o n t e n t : " $ v a r = = t r u e , c e c o n t e n u s ' a f f i c h e " ; } } @ e l s e { & : b e f o r e { c o l o r : $ t e r t i a r y ; c o n t e n t : " $ v a r = = f a l s e , c e c o n t e n u s ' a f f i c h e " ; } } 

DIRECTIVES (SUITE) @FOR @ f o r $ i f r o m 1 t h r o u g h 6 { . f o r - # { $ i } { h e i g h t : $ i * 2 0 # { p x } ; } } / * C S S G É N É R É * / . f o r - 1 { h e i g h t : 2 0 p x ; } . f o r - 2 { h e i g h t : 4 0 p x ; } . f o r - 3 { h e i g h t : 6 0 p x ; } . f o r - 4 { h e i g h t : 8 0 p x ; } . f o r - 5 { h e i g h t : 1 0 0 p x ; } . f o r - 6 { h e i g h t : 1 2 0 p x ; } 

COMPASS Compass est un framework pour SASS. Il contient une multitude de Mixins et d’outils pour nous aider à être plus rapide dans notre développement. 

CSS3 Les mixins pour le CSS3 sont habituellement utilisés pour éviter d’écrire tous les préfixes des fureteurs. Ils sont aussi utiles pour fournir une solution alternative pour les plus vieux fureteurs. Opacity, box-shadow, animations, font-face et plusieurs autres. 

HELPERS Les helpers servent à améliorer les fonctions de SASS. adjust-lightness, font-files, image-width, image-height, prefix, inline- image et plusieurs autres. 

TYPOGRAPHY Mixins qui permettent de styler plus rapidement certains éléments typographiques. Link effects, lists, texts 

UTILITIES Les utilities sont des mixins pour gagner du temps et aider à la maintenance du projet. Sprites, clearfix, resets, browser support etc 

EXTENSIONS Susy h5bp rgba-png ceaser animate.sass etc ... 

APPS Codekit Prepros Mixture Koala 

CODEKIT (MAC SEULEMENT) http://incident57.com/codekit/ 

PREPROS (MAC & PC) http://alphapixels.com/prepros/ 

NICOLAS POLIQUIN Twitter: Github: Courriel: @_polikin https://github.com/polikin [email protected] MATHIEU RIVEST LinkedIn: Github: Courriel: ca.linkedin.com/in/rivestmathieu/ https://github.com/MathRivest [email protected] CRÉDITS Compass Sass The Sass Way Brandon Mathis Camille Roux