Installation [CSS (Cascading Style Sheet)]

Installation

SASS étant écrit en Ruby nous avons deux possibilités :

Installer Ruby sauf sous Mac, où il est installé par défaut.
Installer Node.js en utilisant LibSass (wrapper) qui permet d'utiliser SASS

Il faut maintenant ajouter le préprocesseur SASS à Ruby ou à Node.js.

Dans votre terminal, vous ajoutez le package.

Ruby :

gem install sass

gem install sass

Node.js :

npm install -g sass

npm install -g sass

Pour utiliser SASS, il faut définir le dossier dans lequel se trouve vos fichiers SCSS et celui dans lequel se trouve votre fichier CSS.

sass --watch dossierOrigine:dossierDestination

sass --watch dossierOrigine:dossierDestination

Exemple d'arborescence :

votreSite
  - css
      - scss

votreSite
  - css
      - scss

Ouvrez votre terminal dans le dossier votre site

sass --watch css/scss:css

sass --watch css/scss:css

Écrivez vos fichiers SCSS dans le dossier SCSS, ils seront automatiquement interprétés afin de créer les fichiers CSS dans le dossier CSS.

Ouvrez un fichier style.scss dans le dossier SCSS

$couleur: #ccc;
body {
  background-color: $couleur;
}

$couleur: #ccc;
body {
  background-color: $couleur;
}

Vérifiez qu'un fichier style.css a été créé.