Premiers pas en sass

Préalable : installer sass

Si sass n'est pas installé sur vos machines (tester sass -h dans un terminal). L'installer.
Voir : http://sass-lang.com/.
(Privilégier l'usage de npm si disponible)

Comprendre sass

Créer un fichier nommé "0.scss" et lancer sass en mode "watch" sur ce fichier.
Éditer le fichier scss et insérer les règles suivantes, écrites avec la syntaxe sass/scss. Observer le résultat dans le fichier css produit.
Vous utiliserez ce fichier, ce guide et cette introduction à sass.
  • Écrire, dans le fichier scss, une règle pure css pour la classe ".content", définissant sa taille (width x height), background-color, font-size, padding.
    Observer le résultat sur le fichier css produit.
  • Ajouter une règle qui s'applique aux h1 à l'intérieur d'un .content, en utilisant l'imbrication de sélecteur ; définir la font-size et font-weight.
    Observer le résultat.
  • Ajouter une règle gérant le survol de h1 à l'intérieur de .content, toujours en utilisant un sélecteur imbriqué, et qui augmente la taille de la fonte.
    Observer le résultat.
  • Créer des variables définisant les valeurs de tailles, background-color, font-size, padding de .content, font-size et font-weight de h1. Utiliser ces variables dans les règles précédentes.
  • Dans la règle de survol de h1, définir la font-size en utilisant une expression qui calcule sa valeur à partir de la font-size de h1 non survolé.
  • Dans cette même règle, définir la couleur de fond comme un éclaircissement de la couleur de fond d'origine. Utiliser une fonction sass pour cela (voir la documentation).
    Observer le résultat.
Contruire une sous-arborescence html/ scss/ et css/.
Changer le mode "watch" pour qu'il observe le répertoire scss/ et génère les fichiers dans css/.
  • Créer par copie de "0.scss" un fichier nommé "_content.scss". Un fichier css est-il produit ?
  • Créer un fichier nommé "ex0.scss" et importer le partial "0", ainsi que le partial "content".
    Observer le résultat, corriger "ex0.scss".
  • Dans ce nouveau fichier, ajouter une règle pour l'élement "section", qui réutilise en l'étendant la classe ".content" et ajoute une bordure/des marges.
    Observer le résultat.
    Redéfinir dans ce fichier la valeur de la variable définissant la couleur de fond, est-ce possible ? et pourquoi ?
  • Dans le partial "_content.scss", compléter la définition de la classe ".content" en ajoutant une media-query qui change la couleur de fond à partir de la largeur 50em. Placer cette règle à l'intérieur de la classe.
    Observer dans le résultat final comment est traduite cette construction.
  • Dans le fichier "ex0.scss", ajouter une media query qui, à partir de 65em définit une règle :
    article { @extend .content ; }
    Que dit sass ? Quel est le résultat final ?

Intégration dans votre librairie

Mixins sass

L'exercice consiste à créer un mixin, à partir de notre archive scss pour définir des boîtes d'affichage réutilisables et paramétrables ayant cet aspect :

Préalable

  • Créer un projet dans le répertoire contenant les fichiers de l'archive :
    • répertoire des fichiers de style css : css/
    • répertoire des fichiers sass : scss/
    • répertoire des fichiers images : img/

Premier mixin

  • Construire les règles pour la classe .thumb – les règles définissant l'affichage d'une boite seront imbriquées dans ce sélecteur.
    • Définir un "reset" dans un fichier séparé et l'importer, vérifier son effet,
    • déclarer 3 variables : largeur de la boite, couleur du bouton, couleur de la police dans le bouton,
    • construire la boite : largeur, un peu de padding, une bordure grise. Fixer son mode de dimensionnement à border-box ;
    • tester la mise en page, et regarder le code css produit.
    • En utilisant un sélecteur imbriqué, confiner les images à l'intérieur de la boite.
    • en utilisant un sélecteur imbriqué, définir l'apparence du titre (h3) : marge, taille et épaisseur de la police
    • en utilisant un sélecteur imbriqué, mettre en forme le paragraphe correspondant au bouton : marge, couleurs ; arrondir les coins,
    • toujours en utilisant un sélecteur imbriqué, définir l'effet du survol en utilisant une fonction modifiant la couleur : chercher dans les fonctions sass. Vous pouvez faire quelques essais,
    • faites en sorte que la zone cliquable occupe toute la place du bouton.
    • vérifier que tout fonctionne bien.
  • Transformer votre définition en un mixin :
    • il reçoit en paramètre la largeur de la boite et les couleurs pour le bouton.
    • Mettez ce mixin dans un fichier séparé, nommé _myThumb.scss
    • importez-le dans votre source scss
  • Redéfinissez vos règles en utilisant ce mixin.
  • Nettoyez votre code html : enlever la classe ".thumb", et adaptez vos règles scss.
  • Mettez les 2 boites l'une à côté de l'autre.