User Tools

Site Tools


frontend:sass

Sass

logo

Présentation

C'est un préprocesseur permet l'utilisation de variables et fonctions dans me code et de morcelé un fichier CSS en plusieurs fichiers. Il est très utile pour maintenir son code car plus court et plus clair. Il existe 2 syntaxes : SASS et SCSS.

La syntaxe SASS se base sur une syntaxe indentée (comme le Python) alors que la syntaxe SCSS est une syntaxe en block similaire aux langages les plus communs (C#, C++, Java).

L'utilisation de l'une ou l'autre des syntaxes est une question de gout.

Koala

logo Emmet

Koala est une application graphique pour la compilation Less, Sass, Compass et CoffeeScript, pour aider les développeurs Web à les utiliser plus efficacement. Koala peut fonctionner sous Windows, Linux et Mac.

Syntaxe

Elément parent

On utilise & pour faire référence à l'élément parent :

body {
  font-family: 'Montserrat', sans-serif;
  &.alert {
    margin: 0;
    text-align: center;
    border: 0;
    border-radius: 0;«
    margin: 0;
}

Variables

On utilise $ pour déclarer une variable :

$primary_font: 'Montserrat';
body {
  font-family: $primary_font, sans-serif;
  &.alert {
    margin: 0;
    text-align: center;
    border: 0;
    border-radius: 0;
    margin: 0;
}

On peut déclarer les variables dans un fichier à part, par exemple : assets\scss\shared\_variables.scss :

$primary_font: 'Montserrat';

Il faut alors importer ce fichier dans le fichier assets\scss\app.scss :

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
 
@import 'shared/_variables.scss';
 
body {
  font-family: $primary_font, sans-serif;
}
 
.alert {
  margin: 0;
  text-align: center;
  border: 0;
  border-radius: 0;
  margin: 0;
}

On n'est pas obligé de mettre le _ devant le nom du fichier, Symfony le trouvera quand même.

Modules intégrés

Sass fournit de nombreux modules intégrés qui contiennent des fonctions utiles :

  • color
  • list
  • map
  • math
  • meta
  • selector
  • string

voir la documentation : https://sass-lang.com/documentation/modules-Built-In Modules

Interpolation

Utilisation de Bootstrap

Avec Symfony, On peut importer Bootstrap au début d'un fichier :

@import "~bootstrap";

Puis on peut utiliser les classes de Bootstrap :

img {
  @extend .mb-2;
  @extend .rounded;
  @extend .shadow;
  @extend .img-thumbnail;
}

Ou

img {
  @extend .mb-2,
  .rounded,
  .shadow,
  .img-thumbnail;
}

Tuto Vidéos

Code & Design : Tutoriel SASS

Formation

frontend/sass.txt · Last modified: 2020/09/19 01:20 (external edit)