Guide du débutant sur Sass

Cet article est une traduction à l’article A Beginner’s Guide to Sass, écrit par Amanda Treutler.
Si des articles sur les préprocesseurs vous intéresse, je pourrai écrire moi-même à ce sujet..

Qu’est-ce que Sass?

Sass (syntactically awesome style sheets) est un langage de script qui est complètement compatible avec toutes les versions de CSS. Il s’agit d’un préprocesseur CSS qui vous permet d’ajouter des fonctionnalités, de l’efficacité et de la convivialité au CSS standard.

Pourquoi devrais-je l’utiliser?

Si vous êtes déjà familier avec CSS, Sass est facile à apprendre et vous permet d’utiliser des variables, des fonctions, des mix-ins et d’autres fonctionnalités intégrées qui facilitent la conception d’une page Web ou d’une application Web.

Que vais-je apprendre si je lis ce guide ?

Je ne vais pas essayer de vous apprendre tout ce qu’il y a à savoir sur Sass ou tout ce que vous pouvez en faire. Au lieu de cela, je vais vous présenter les concepts de base afin que vous puissiez commencer immédiatement !

Avant de commencer, voici quelques choses que vous devez savoir :
Les navigateurs ne peuvent pas lire Sass, donc vos fichiers Sass doivent être compilés en CSS simple. Cela peut être fait avec Node.js en tant que compilateur, ou avec des outils comme Gulp ou Grunt.
Il existe aussi des extensions pour les différents éditeurs de code.

Sass prend en charge deux formats de syntaxe différents :

• Sass: Parfois appelé «syntaxe indentée» car il utilise l’indentation au lieu des crochets. Si vous écrivez Sass, utilisez l’extension de fichier .sass.

@mixin button-base()
  @include typography(button)

  display: inline-flex
  position: relative
  height: $button-height
  border: none
  vertical-align: middle

  &:hover
    cursor: pointer

• Scss (Sass CSS): Pour écrire du scss, utilisez l’extension de fichier .scss. J’utiliserai Scss pour ce guide.
  Voici le même code en SCSS

@mixin button-base() {
  @include typography(button);

  display: inline-flex;
  position: relative;
  height: $button-height;
  border: none;
  vertical-align: middle;

  &:hover {cursor: pointer}
}

Commençons !

Variables

Les variables Sass se compilent dans la valeur réelle, pas dans les variables CSS. Voici un exemple rapide de la façon dont vous pouvez utiliser des variables pour gagner du temps. Cela rend très simple de changer les couleurs d’un bout à l’autre du site.

$primary-color: #FB10F2;
$accent-color: #5B93FF;
$text-color: #FDB234;
$heading-color: #4CFF8C;

body {
	background: $primary-color;
}

h1 {
	color: $primary-color;
}

.header {
	background-color: $accent-color;
}

#first-paragraph {
	color: $text-color;
}

Maps

Un Maps dans Sass est un ensemble de paires clé-valeur. Sass fournit plusieurs fonctions qui peuvent être utilisées en conjonction avec des cartes pour accéder aux valeurs, faire quelque chose pour chaque valeur, créer une nouvelle paire clé-valeur, etc…

Accéder à une valeur

$font-weights: (
  "light": 300,
  "regular": 400,
  "bold": 700
);

h1 {
  font-weight: map-get($font-weights, light)
}

Faire quelque chose avec chaque valeur d’une Maps

$icons: (
  abacus: "\f640",
  address-book: "\f2b9",
  bell: "\f0f3",
  dog: "\f6d3",
  igloo: "\f7ae"
);

@each $name, $icon in $icons {
  .fa-#{$name}:before {
    content: $icon;
  }
}

Imbrication

En CSS standard, il peut parfois être inefficace d’accéder aux éléments enfants. Sass rend cela plus facile aussi !

.container {
  width: 60%;
  margin: 2em;

  p {
    ont-weight: map-get($font-weights, light)
  }
}

Fonctions

Les fonctions vous permettent de créer des opérations complexes et de les réutiliser dans votre code. Pour définir une fonction, utilisez @function suivi du nom de votre fonction et de toutes les variables. Une fonction doit également contenir une indication de la valeur de retour pour l’appel de fonction.

@function invert($color, $amount: 100%) {
  $inverse: change-color($color, $hue: hue($color) + 180);
  @return mix($inverse, $color, $amount);
}

$primary-color: rgb(245, 3, 48);

.header {
  background-color: invert($color, $amount: 80%);
}

Mixins

@mixin important {
  font-weight: bold;
  color : $accent-color;
  text-align: center;
  background-color: $secondary-color;
  text-transform: uppercase;
}

#info-container {
  @include important
}

Les mixins peuvent contenir des arguments

Si vous souhaitez réutiliser le code écrit dans votre mixin mais transmettre des valeurs différentes pour créer des styles différents, vous pouvez passer un argument à cette mixin.

@mixin flex($direction) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

#info-container {
  @include flex(column)
}

Il existe de nombreuses autres façons intéressantes et intéressantes d’utiliser Sass, alors j’espère que cela a suscité votre intérêt !
C’est facile et amusant à utiliser !