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.
ivargrimstad
uhooi
manfredsteyer
yuisakamoto
har1101
ssssota
mayuki
.png){kind=avatar}
yuriko1211
0si43
righttouch
petamoriken
afnizarnur
bkeepers
nonsquared
lara
rocio
chriscoyier
geeforr
notwaldorf
sferik
carmenintech
tammyeverts
![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}