Aide-memoire

SCSS

Les outils Sass pour organiser une feuille de style lisible : variables, mixins, modules et fonctions.

VariablesMixinsModulesFonctions

$couleur-primaire: #3498db;
$taille-font: 16px;

body {
  font-size: $taille-font;
  color: $couleur-primaire;
}

nav {
  ul {
    display: flex;
  }

  a {
    color: red;
  }
}

Limiter la profondeur pour garder le CSS facile a relire.

@mixin centre {
  display: flex;
  justify-content: center;
  align-items: center;
}

.boite {
  @include centre;
}

@for $i from 1 through 3 {
  .col-#{$i} {
    width: 100px * $i;
  }
}

@if $theme == light {
  background: white;
} @else {
  background: black;
}

@function em($pixels, $base: 16) {
  @return #{$pixels / $base}em;
}

body {
  font-size: em(18);
}

scss/
  base/
    _settings.scss
  components/
    _button.scss
  layout/
    _header.scss
  main.scss

@use './settings' as *;