1. APPRENDRE SASS
AMINE EL HARRAK «Full Stack developer »
Email : Amine.elharrak@gmail.com
Site web : http://amine-elharrak.rhcloud.com
LinkedIn : https://www.linkedin.com/in/amine-el-harrak-46263216
Viadeo : http://ma.viadeo.com/fr/profile/amine.elharrak
Git hub : https://github.com/aelharrak
Slideshare : http://fr.slideshare.net/amine78
2. OBJECTIF
Créer une feuille de style SASS
Mixins & Selector
Fonctions et Operations
Durable SCSS
3. INTRODUCTION
Sass (Syntactically Awesome Stylesheets) est un langage de génération dynamique
de feuilles de style initialement développé par Hampton Catlin et Nathalie
Weizenbaum.
Sass est un métalangage de feuilles de style en cascade (CSS). C’est un langage de
script qui est interprété en CSS. SassScript est le langage de script lui-même. Deux
syntaxes existent. La syntaxe originale, nommée « syntaxe indentée », est proche
de Haml. La nouvelle syntaxe se nomme « SCSS ». Elle a un formalisme proche de
CSS.
Sass peut être étoffé avec Compass (pratique pour les préfixes des différents
navigateurs).wikipedia
5. POURQUOI SASS?
Sass, ou Syntaxiquement Style Sheets Impressionnant, est un
langage d’extension pour CSS. Avec Sass, vous pouvez écrire du
code propre, durable et résoudre les défis de redoublement et
d’entretien courants dans le CSS traditionnel.
En plus d’être une compétence précieuse pour tout développeur
front-end, la transition de CSS à Sass est assez lisse en raison de
la syntaxe familière.
6. COMPILER SASS
SASS ne peut pas être interprété directement par votre navigateur, il doit être converti ou
compilé à CSS avant de l’intégrer directement dans vos pages (production).
7. PLUS ++
Sass a de nombreux avantages qui nous permettent d’écrire un code lisible. comme
nous allons explorer les trois concepts (Variables, Mixins, Nests, …)
8. LES SÉLECTEURS IMBRIQUÉS
Nesting est un processus consistant à placer des sélecteurs à l’intérieur d’un autre
sélecteur :
Dans la programmation, la portée d’une variable est le contexte dans lequel une
variable est définie et disponible à l’utiliser.
Dans Sass, il est utile de penser à la portée d’un sélecteur comme tout le code
entre son ouverture et la fermeture de accolades{}
Les sélecteurs qui sont imbriquées à l’intérieur d’un autre sélecteur sont considérés
comme des enfants. Le premier sélecteur est désigné comme le parent. Ceci est
tout comme la relation observée dans les éléments HTML.
9. LES SÉLECTEURS IMBRIQUÉS
Nesting vous permet de voir les relations claire dans DOM entre les sélecteurs tout
en éliminant la répétition observée dans CSS.
10. LES PROPRIÉTÉS IMBRIQUÉS
L’imbrication ne se limite pas seulement aux sélecteurs.Vous pouvez également
imbriquer des propriétés CSS commun si vous ajoutez un: après le nom de la
propriété.
11. LESVARIABLES DANS SASS
Les variables vous permettent d’attribuer un identifiant de votre choix à une valeur
spécifique et contrairement à CSS, si vous devez modifier une valeur, vous aurez
seulement à le mettre à jour en un seul endroit et le changement sera reflété dans
plusieurs règles.
$ est utilisé pour définir et faire référence à une variable:
Note: Il est important de se tenir à une convention de nommage pour les variables
lorsque vous construisez votre code. Cela vous aidera à référencer facilement à
l’avenir.
12. MAPS ET LISTES
En plus de la couleur, les numéros, les chaînes, les booléens, et null, Sass a
également deux autres types de données, des listes et des Maps (Les listes peuvent
être séparés par des espaces ou des virgules)
Par exemple, la liste suivante indique les propriétés de police, tels que:
Remarque:Vous pouvez également entourer une liste avec des parenthèses et créer
des listes composées de listes.
13. MAPS ET LISTES
Les Maps sont très similaires à des listes, mais chaque objet est une paire clé-
valeur, ressemble à:
Remarque: Dans une Maps, la valeur d’une clé peut être une liste ou d’une autre
map.
15. LE & SELECTOR D’IMBRICATION
styliser le contenu avant ou après le contenu d’un élément (::before ou ::after) .
pseudo classe tels que :hover pour définir les propriétés d’un élément lorsque la
souris de l’utilisateur est en contact.
Dans Sass, le caractère & est utilisé pour spécifier exactement à un sélecteur parent
doit être inséré. Il contribue également à écrire des classes Pseudo d’une manière
beaucoup moins répétitif.
Par exemple, le Sass suivant:
16. QU’EST-CE QU’UN MIXIN?
En plus des variables et l’imbrication,
Sass a de multiples constructions qui
réduisent la répétition.
Dans Sass, un mixin vous permet de
faire des groupes de déclarations CSS
que vous souhaitez réutiliser sur votre
site.
17. MIXINS: ARGUMENTS
Mixins ont également la possibilité de prendre une valeur.
Un argument ou un paramètre, est une valeur passée à la mixin qui sera utilisé à
l’intérieur du mixin, comme $visibility dans cet exemple:
Dans le code ci-dessus, hidden est passé pour le mixin backface-visibility, où il sera
affecté en tant que la valeur de son argument, $visibility.
18. VALEUR PAR DÉFAUT DES ARGUMENTS
Arguments Mixin peuvent se voir attribuer une valeur par défaut dans la définition
mixin en utilisant une notation spéciale.
Une valeur par défaut est affectée à l’argument si aucune valeur est passée lorsque
le mixin est inclus. Définition d’une valeur par défaut pour chaque argument est
facultatif.
La notation est la suivante:
19. IMPORTANTS INFORMATIONS DES
ARGUMENTS ET MIXINS
En général, voici 5 importants informations sur les arguments et les mixins:
Mixins peut prendre plusieurs arguments.
Sass vous permet de définir explicitement chaque argument dans votre déclaration
@include.
Lorsque les valeurs sont explicitement spécifiées, vous pouvez les envoyer dans
l’ordre.
Si une définition mixin a une combinaison d’arguments avec et sans une valeur par
défaut, vous devez définir ceux avec aucune valeur par défaut en premier.
Mixins peuvent être imbriquées.
20. IMPORTANTS INFORMATIONS DES
ARGUMENTS ET MIXINS
Voici quelques exemples concrets des règles:
Dans l’exemple ci-dessus, la couleur de la bordure des éléments span serait blanc, la bordure des
éléments de paragraphe serait vert, tandis que les éléments div auraient une bordure violet plus
épaisse.
22. STRING INTERPOLATION
Dans Sass, l’interpolation de chaîne est le processus consistant à placer une variable
chaîne au milieu de deux autres cordes, dans un contexte mixin, l’interpolation est
pratique lorsque vous voulez utiliser des variables dans les sélecteurs ou les noms
de fichiers :
23. LE SELECTOR D’IMBRICATION « & »
Sass permet l’utilisation du & sélecteur
à l’intérieur de mixins :
Le sélecteur “&” attribue la valeur du
parent à l’endroit où le mixin est
inclus, S’il n’y a pas de sélecteur de
parent, alors la valeur est nulle et Sass
lancera une erreur.
25. FONCTIONS ET OPÉRATIONS
Les Fonctions et les opérations en Sass permettent de calculer et itérer sur les
styles.
Et on peut faire:
Agir sur les valeurs de couleur
Itérer sur les listes et les maps
Appliquer des styles en fonction des conditions
Affectez des valeurs qui résultent des opérations mathématiques
26. ARITHMÉTIQUE ET COULEUR
Comme mentionné, Sass est équipé de fonctions qui rendent le travail avec des
couleurs plus faciles.
Le paramètre alpha dans une couleur comme RGBA ou HSLA est un masque
indiquant l’opacité.
Il spécifie comment une couleur devrait être fusionné avec un autre lorsque les deux
sont sur le dessus de l’autre.
NB :La fonction fade-out fait une couleur plus transparente en prenant un
nombre compris entre 0 et 1.
27. ARITHMÉTIQUE ET COULEUR
La fonction fade-in($color, $degrees) modifie la teinte d’une couleur en prenant la
couleur et un certain nombre de degrés (généralement entre -360 degrés et 360
degrés).
28. COULEURS FONCTIONS
Sass nous permet également
d’effectuer des fonctions
mathématiques pour calculer des
mesures y compris les couleurs.
Voici comment calculer les couleurs:
L’opération est réalisée sur les
composantes rouges, vertes et bleues.
Il calcule la réponse en agissant sur
tous les deux chiffres.
29. ARITHMÉTIQUE
Les opérations arithmétiques Sass sont:
plus +
soustraction –
multiplication *
division /, and modulo %.
Note: Modulo, ou%, est le reste d’une division donnée, de sorte que “9% 2” serait “1”.
SCSS arithmétique exige que les unités sont compatibles; par exemple, vous ne pouvez pas
multiplier les pixels par ems.
Aussi, tout comme en mathématiques régulière, la multiplication de deux unités ensemble des
résultats en unités au carré: 10px * 10px = 100px * px.
Comme il n’y a pas une telle chose que des unités au carré en CSS, ci-dessus serait une erreur.
Vous auriez besoin de multiplier 10px * 10 afin d’obtenir 100px.
30. DIVISION PEUT ÊTRE SPÉCIALE
Voici les instances spécifiques compte comme division:
Si la valeur, ou une partie de celui-ci, est stocké dans une variable ou renvoyée par
une fonction.
Si la valeur est entouré par des parenthèses, à moins que ces parenthèses sont en
dehors de la liste et la valeur est à l’intérieur.
Si la valeur est utilisée dans le cadre d’une autre expression arithmétique.
Voici quelques exemples:
33. SCSS DURABLE
Sass peut être source de confusion si elle n’a pas organisé correctement, nous allons plonger dans
les meilleures pratiques de la langue, l’organisation des fichiers, quand est préférable d’inclure
(include) un mixin ou d’étendre (extend).
35. @IMPORT DANS SCSS
La règle CSS @import permet d’importer une feuille de style externe au seins
même d’une même feuille de style.
36. ORGANISER MON CODE AVEC LES
PARTIALS
Un partiel est tout simplement un fichier préfixer par _ (_partial.scss)
c’est le code que vous avez déjà diviser pour organiser des fonctionnalités
spécifiques dans le codebase, sachant qu’il ne doit pas être généré dans un fichier
CSS au moment compilation.
pour importer un partiel :
37. @EXTEND
Ceci est l’une des caractéristiques les
plus utiles dans Sass. l’utilisation de
@extend vous permet de partager un
ensemble de propriétés CSS d’un
sélecteur à l’autre. et il aide à garder
votre Sass très sec.
Dans notre exemple, nous allons créer
une simple série des messages avec 3
états (error , warning et success).
38. %PLACEHOLDERS
Sass permet un type spécial de sélecteur appelé un espace réservé, qui se
comportent comme un sélecteur de classe ou id, mais utiliser la notation% au lieu
de # ou.
