Votre première transformation Sass

////Votre première transformation Sass

Effectuez votre première transformation Sass.

Objectifs

 Créer un fichier monstyle.scss

 Utiliser le moteur Sass pour créer le fichier monstyle.css à partir de monstyle.scss

Liens utiles

 RubyInstaller Windows

 Compass

Programme

 Partie 1 : création fichier monstyle.scss

 Partie 2 : compilation de monstyle.scss vers monstyle.css

 Partie 3 : scruter un repertoire

Durée

15 min.

Rappel Sass

cours-sass-compass-1

Partie 1 : création fichier monstyle.scss

Dans un répertoire (ici D:formationsasscompasstest) , créez un fichier monstyle.scss

tutoriel-compilation-sass-1

 

tutoriel-compilation-sass-2

 

Partie 2 : compilation de monstyle.scss

 lancez la commande : sass monstyle.scss

tutoriel-compilation-sass-3

 Expliquez la sortie

tutoriel-compilation-sass-4

 lancez la commande : sass monstyle.scss monstyle.css

tutoriel-compilation-sass-5

 

tutoriel-compilation-sass-6

 Expliquez

Partie 3 : scruter un répertoire

Il n’est pas très productif de devoir toujours lancer la commande de compilation sass afin que le Css soit mis à jour.

Expliquer la commande suivante : sass –watch stylesheets/sass:stylesheets/css

 Mettez en oeuvre cette technique : créez répertoires stylesheets/sass et déposez le fichier monstyle.scss

QUESTION : quel est le résultat de la commande suivante :

tutoriel-compilation-sass-7

 Modifier ‘à chaud’ le fichier scss et analyser la mise à jour ‘automatique’ du fichier css

tutoriel-compilation-sass-8

 Expliquez

tutoriel-compilation-sass-9

 Expliquez

tutoriel-compilation-sass-10

 Expliquez

Correction

demo-sass

Conclusion

Dans ce tutoriel vous avez mis en oeuvre le moteur de transformation Sass.

2018-01-29T17:31:33+01:00

Contactez nous

241 rue DUGUESCLIN, 69003 Lyon

Web : Objis : spécialiste formation Java