Les bases de scss / sass

SASS (Syntactically Awesome Style Sheet) est un langage dynamique de génération de CSS. Deux syntaxes existent : 

  • la forme originale ou "indented syntax" ou "SASS"
  • la forme plus récente : Sassy CSS (SCSS) qui, comme son nom l'indique, est nettement plus proche de la syntaxe CSS. Pour nous, qui connaissons les CSS, il sera donc plus facile d'appréhender le SCSS

Compilation via le compilateur ruby

sudo apt-get install ruby-sass
sudo gem install compass
sudo gem
# exemple de commande pour compiler du sass vers du css : 
# sass --watch style.scss:style.css

Compilation via Visual Studio Code

Installer l'extension Live sass compiler

Afin de placer le résultat des fichiers compilés dans le répertoire css de vos projets, voici le code à ajouter dans le fichier settings de VSC :

"liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/css/"
    }
  ]

 

    Tuto en français