🎨 Aide-mémoire SCSS

🔤 Variables

$couleur-primaire: #3498db;
$taille-font: 16px;
body {
  font-size: $taille-font;
  color: $couleur-primaire;
}

📦 Imbrication

nav {
  ul {
    li {
      a {
        color: red;
      }
    }
  }
}

🧠 Mixins

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

🔁 Boucles

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

🔂 Conditions

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

📚 Fonctions

@function em($pixels, $base: 16) {
  @return #{$pixels / $base}em;
}
body {
  font-size: em(18);
}

🧬 Héritage

%bouton-base {
  padding: 10px;
  border-radius: 5px;
}
.bouton {
  @extend %bouton-base;
  background: blue;
}

🛠️ Outils utiles

• Live Sass Compiler : extension VSCode
• Dart Sass : compilateur officiel
• stylelint : linter SCSS

📁 Organisation recommandée

scss/
├── base/
│   └── settinges.scss
├── components/
│   └── bouton.scss
├── layout/
│   └── header.scss
├── utils/
│   └── variables.scss
└── main.scss

📋 Bonnes pratiques

• Nommer clairement ses variables et mixins
• Limiter la profondeur d’imbrication
• Modulariser avec @import ou @use ==> ajout @use './settings' as *;