📚 Cours simplifié : SASS & Tailwind CSS

🧩 Introduction

Ce cours présente deux outils essentiels en CSS :

• SASS : un préprocesseur CSS
• Tailwind CSS : un framework CSS basé sur des classes utilitaires

🟣 PARTIE 1 : SASS

🔹 Qu'est-ce que SASS ?

SASS est un préprocesseur CSS qui permet :

• d'utiliser des variables
• d'écrire du code plus structuré
• de réutiliser du code (mixins)

⚙️ Installation

npm install -g sass
sass --watch input.scss output.css

🆚 SASS vs SCSS

• .sass → indentation
• .scss → syntaxe CSS classique ✅

📦 Imbrication

body {
  margin: 0;
  h1 {
    text-transform: uppercase;
  }
}

🎨 Variables

$main-color: red;

.button {
  color: $main-color;
}

🔁 Mixins

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

.container {
  @include center;
}

🔄 Boucles

@for $i from 1 through 3 {
  .p-#{$i} {
    padding: $i * 10px;
  }
}

🔀 Conditions

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

🧠 Fonctions

@function rem($px) {
  @return $px / 16 * 1rem;
}

🏗️ BEM

• .block
• .block__element
• .block--modifier

🔵 PARTIE 2 : TAILWIND CSS

🔹 Présentation

Framework basé sur des classes utilitaires :

<div class="p-4 bg-blue-500 text-white"></div>

⚙️ Installation

npm install tailwindcss @tailwindcss/vite

@import "tailwindcss";

🧱 Utility Classes

• p-4
• text-sm
• bg-red-500

📱 Responsive

<div class="md:flex"></div>

🌙 Dark mode

<div class="dark:bg-black"></div>

🎯 Variants

<button class="hover:bg-blue-500"></button>

👥 Group

<div class="group">
  <span class="group-hover:text-red-500">Hover</span>
</div>

🎨 Customisation

@theme {
  --color-primary: red;
}

⚠️ @apply

.btn {
  @apply bg-blue-500 text-white;
}

⚖️ Comparaison

SASS

• Structuré
• Puissant

Tailwind

• Rapide
• Flexible

🧪 Conclusion

👉 SASS = structure
👉 Tailwind = rapidité
👉 Les deux = combo parfait 🚀