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

Installation via npm

Nécessite d'avoir installé :

// dans la console de git bash ou de VSC (si ça fonctionne pour vous)
npm install -g sass
sass --version//pour vérifier que sass est bien installé

Compilation via sass

sass --watch index.scss index.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/"
    }
  ]

Principales fonctionnalités

Variables : 

$black: #000000

Mixin

@mixin button(
  $codecontent: "",
  $bgcolor: black,
  $fgcolor: white,
  $bordercolor: black,
  $bordersize: 3px
) {
  @include glyphicon($codecontent);
  text-transform: uppercase;
  border: $bordersize solid $bordercolor;
  padding: 10px 10px;
  display: block;
  margin: 0 15px;
  color: $fgcolor;
  background-color: $bgcolor;
  text-decoration: none;
  &:hover {
    background-color: darken($bgcolor, 20%);
    border-color: darken($bgcolor, 20%);
    color: lighten($fgcolor, 20%);
  }
}
@include button($codecontent: '\f342');

Imbrication :

>p {
  a {
    @include button();
  }
}

 

Quelques exemples de mixins

@include media-breakpoint-up(xl) {
  h1 {
    color: yellow;
    background-color: black;
    @include box-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
  }
}
h2.sr {
  @include visually-hidden();
}

    Tuto en français