BASICS :

1. Installer dart sass : https://github.com/sass/dart-sass/releases/tag/1.25.0
2. Créer une feuille de style .scss
3. Pour compiler le tout : dans le terminal de l'IDE

//./dart-sass/sass  fichierDeBase(scss)  nomDuFichierAGenerer
./dart-sass/sass  style.scss  style.css

//genere un nouveau fichier a chaque changements
./dart-sass/sass  style.scss  style.css --watch 

Le fichier "style.css.map" permet au navigateur internet de faire le lien entre notre fichier scss et le css qu'il utilise , pour voir d'ou viennent les erreurs

SASS permet l'import de fichiers CSS en utilisant :

@import "style2.css";

IMBRICATION :

Pour éviter la répétition on peux imbriquer les selecteurs CSS sur plusieurs niveaux :

.table{
		width: 100%;
		td{
			border: 2px solid black;
		}
		thead{
			background: #000;
			color: blue;
			th{
					color: blue;
			}
		}
}
// 
.btn{
	background: lightblue;
	&:hover{          //bien penser a utiliser le & sinon ca ne fonctionnera pas!
			background: blue;
	}
	.theme-vert & {
		background-color: green;
	}
}

L'HERITAGE :

.btn{
	padding: 5 12px;
	background: lightblue;
	color: white;

	&:hover {
		background: blue;
		color: grey;
	}
}

.btn-danger {
	@extend .btn;   //permet de recuperer les classes de mon .btn sans tout recopier
	background: red;
	&:hover{
		background: lightred;
	}
}

Astuce : On peux utiliser la syntaxe %element pour définir des propriétés par défaut sur des elements mais n'apparaitra pas dans notre page WEB !

%btn {                //style par défaut mais qui n'apparait pas dans notre page web
	padding : 20px;
	margin: 12px;
	background: lightblue;
}

.btn {
	@extend %btn;       //recupere les attributs de %btn
}

VARIABLES :