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.
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 " ;
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é
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.
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
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 ;
- 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
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
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.
: # 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 ;
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.
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.
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 ) ; }
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 ; }
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.
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
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.
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 ) ; }
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.
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
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 " ; } }
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 ; }
é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.
gotok365
ruzia
faithandbrave
seike460
riofujimon
syumai
eltociear
pospome
bkuhlmann
lewuathe
kj455
ryunakayama
samlambert
garrettdimon
eileencodes
marcduiker
erikaheidi
jcasabona
destraynor
jonyablonski
morganepeng
shpigford
tenderlove
![NICOLAS POLIQUIN Twitter: Github: Courriel: @_polikin https://github.com/polikin [email protected] MATHIEU RIVEST](https://files.speakerdeck.com/presentations/b24759d01d6b01319c5d1a742182464d/slide_42.jpg){kind=link}