====== SASS / SCSS ======

  * [[https://dev.to/finallynero/scss-cheatsheet-7g6|SCSS Cheat Sheet]]
  * [[https://sass-lang.com/|Site officiel SASS]]
  * [[https://www.pierre-giraud.com/sass-apprendre-cours-complet/]]
  * [[https://css-tricks.com/the-sass-ampersand/]]

===== Installation =====

[[https://sass-lang.com/install/]]

Installer **NodeJS** et **NPM** :

<code bash>
sudo apt install nodejs npm
</code>

Tester les versions :

<code bash>
node -v
npm -v
</code>

Installer **SASS** globalement :

<code bash>
sudo npm install -g sass
</code>

===== Utilisation =====

Compiler un **.scss** :

<code bash>
sass style.scss style.css
</code>

Recompiler à chaque modification du fichier :

<code bash>
sass --watch input.scss output.css
</code>


===== Variables =====

<code css>
$body-background: #354E64;
$body-text      : #00102A;
$main-font      : 'Roboto', sans-serif;

body {
    background-color: $body-background;
    color           : $body-text;
    font-family     : $main-font;
}
</code>

===== Imports =====

Importe les fichiers **_colors.scss** et **_widgets.scss** au sein de **main.scss**.

Les fichiers importés sont préfixés par un underscore afin qu'ils soient
ignorés par la compilation automatique, seul **main.scss** sera compilé
et importera les deux autres.

<code css main.scss>
@import "_colors";
@import "_widgets";
</code>