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é :
- git bash : https://gitforwindows.org/
- node : https://sass-lang.com/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(); }