Apprendre sass

189 vues

Publié le

Sass

Publié dans : Ingénierie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
189
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4
Actions
Partages
0
Téléchargements
10
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Apprendre sass

  1. 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. 2. OBJECTIF  Créer une feuille de style SASS  Mixins & Selector  Fonctions et Operations  Durable SCSS
  3. 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
  4. 4. CRÉER UNE FEUILLESTYLE SASS
  5. 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. 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. 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. 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. 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. 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. 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. 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. 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.
  14. 14. MIXINS & SELECTOR
  15. 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. 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. 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. 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. 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. 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.
  21. 21. LISTE ARGUMENTS Sass vous permet de passer de multiples arguments dans une liste :
  22. 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. 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.
  24. 24. FONCTIONS ET OPÉRATIONS
  25. 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. 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. 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. 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. 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. 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:
  31. 31. LES BOOCLES EACH/FOR
  32. 32. LES CONDITIONS (IF/ELSE) DANS SASS
  33. 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).
  34. 34. STRUCTURE la meilleures pratiques pour organiser les fichiers :
  35. 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. 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. 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. 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.
  39. 39. @EXTENDVS @MIXIN
  40. 40. FINAL DEL PARTIDO Merci pour votre attention

×