Sass avec Visual Studio Code
Installer l'extensions Live Sass Compiler
Cliquez sur extensions (dans la barre de gauche) ou Ctrl + Shift + X.
Cherchez live sass compiler dans la barre de recherche.
Cliquez sur install
Création du fichier .scss
Vous pouvez créer un fichier .scss dans votre projet
Clic-droit dans projet > New File
$background : #CCC;
body {
margin: 0;
background-color: $background;
}
Cliquez sur Watch Sass en bas de VS Code. Le fichier devrait compiler sans erreur et crĂ©er un fichier .css dans le mĂȘme dossier que votre fichier .scss.
Configurer Live Sass Compiler
Cliquez sur extensions (dans la barre de gauche) ou Ctrl + Shift + X.
Cliquez sur l'engrenage (Manage) de l'extension
Cliquez sur Configure Extension Settings.
Cliquez sur Edit in settings.json.
{
"telemetry.enableTelemetry": false,
"telemetry.enableCrashReporter": false,
//pas de fichier map
"liveSassCompile.settings.generateMap" : false,
"liveSassCompile.settings.formats":[
//dist minified
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "/dist/css"
},
//fichiers source
{
"format": "expanded",
"extensionName": ".css",
"savePath": "/src/css"
}]
}
Cette configuration permet de séparer les fichiers source des fichiers de distribution.
Les fichiers source (dossier /src/css) seront séparés des fichiers de distribution (dossier /dist/css) et des fichiers Sass.
Commenter
Vous pouvez commenter un fichier Sass. Par exemple :
$background : #CCC;
body {
//Ce commentaire ne sera pas présent dans le fichier CSS
margin: 0;
/* Ce commentaire respecte le format CSS et sera présent dans le fichier CSS
En revanche il ne sera pas présent dans le fichier .min.css */
background-color: $background;
/*! Ce commentaire sera dans le fichier .min.css */
}
Les commentaires avec // seront Ă utiliser pour les commentaires relatifs au Sass pour Ă©viter de polluer le fichier CSS avec des commentaires qui ne le concerne pas.
Les commentaires avec /* */ sont Ă utiliser pour les commentaires CSS.
Enfin, les commentaires avec /*! */ doivent ĂȘtre utilisĂ©s avec parcimonie. Ils sont Ă utiliser seulement pour des choses importantes qui concernent le fichier minifiĂ©... Donc normalement vous n'en aurez pas besoin.
N'oubliez pas d'inclure les fichiers css du dossier /dist
<link rel="stylesheet" href="dist/css/main.min.css" />
Commentaires
Enregistrer un commentaire