Apprendre sass

40
APPRENDRE SASS AMINE EL HARRAK «Full Stack developer » Email : [email protected] 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

Transcript of Apprendre sass

Page 1: Apprendre sass

APPRENDRE SASSAMINE EL HARRAK «Full Stack developer »

Email : [email protected] web : http://amine-elharrak.rhcloud.com

LinkedIn : https://www.linkedin.com/in/amine-el-harrak-46263216Viadeo : http://ma.viadeo.com/fr/profile/amine.elharrakGit hub : https://github.com/aelharrakSlideshare : http://fr.slideshare.net/amine78

Page 2: Apprendre sass

OBJECTIF Créer une feuille de style SASS Mixins & Selector Fonctions et Operations Durable SCSS

Page 3: Apprendre sass

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

Page 4: Apprendre sass

CRÉER UNE FEUILLESTYLE SASS

Page 5: Apprendre sass

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.

Page 6: Apprendre sass

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

Page 7: Apprendre sass

PLUS ++

Sass a de nombreux avantages qui nous permettent d’écrire un code lisible. comme nous allons explorer les trois concepts (Variables, Mixins, Nests, …)

Page 8: Apprendre sass

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.

Page 9: Apprendre sass

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.

Page 10: Apprendre sass

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

Page 11: Apprendre sass

 LES VARIABLES 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.

Page 12: Apprendre sass

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.

Page 13: Apprendre sass

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.

Page 14: Apprendre sass

MIXINS & SELECTOR

Page 15: Apprendre sass

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:

Page 16: Apprendre sass

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.

Page 17: Apprendre sass

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.

Page 18: Apprendre sass

VALEUR PAR DÉFAUT DES ARGUMENTSArguments 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:

Page 19: Apprendre sass

IMPORTANTS INFORMATIONS DES ARGUMENTS ET MIXINSEn 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.

Page 20: Apprendre sass

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.

Page 21: Apprendre sass

LISTE ARGUMENTS

Sass vous permet de passer de multiples arguments dans une liste :

Page 22: Apprendre sass

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 :

Page 23: Apprendre sass

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.

Page 24: Apprendre sass

FONCTIONS ET OPÉRATIONS

Page 25: Apprendre sass

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

Page 26: Apprendre sass

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.

Page 27: Apprendre sass

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

Page 28: Apprendre sass

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.

Page 29: Apprendre sass

ARITHMÉTIQUELes 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.

Page 30: Apprendre sass

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:

Page 31: Apprendre sass

LES BOOCLES EACH/FOR

Page 32: Apprendre sass

LES CONDITIONS (IF/ELSE) DANS SASS

Page 33: Apprendre sass

SCSS DURABLESass 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).

Page 34: Apprendre sass

STRUCTURE

la meilleures pratiques pour organiser les fichiers :

Page 35: Apprendre sass

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

Page 36: Apprendre sass

ORGANISER MON CODE AVEC LES PARTIALSUn 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 :

Page 37: Apprendre sass

@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).

Page 38: Apprendre sass

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

Page 39: Apprendre sass

@EXTEND VS @MIXIN

Page 40: Apprendre sass

FINAL DEL PARTIDO

Merci pour votre attention