Premiers pas en sass

Préliminaires : installer sass

Si saas 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 synaptic si dépôt 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.
  • ajouter 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.
  • ajouter une règle s'appliquent 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 doc). Observer le résultat.
  • Créer par copie de "0.scss" un fichier nommé "_content.scss". Un fichier css est-t-il produit ?
  • Créer un fichier nommé "ex0.scss" et importer le partial "0", ainsi que le partial "content". Observer le résultat.
  • 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.
  • 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 70em. 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