Här är en steg-för-steg guide för att skapa en enkel webbsida som använder SASS.
Om du inte redan har Node.js och npm installerade, gå till Node.js officiella webbplats och följ instruktionerna där.
Öppna en terminal och kör följande kommando för att installera SASS globalt:
npm install -g sass
Skapa en ny mapp för ditt projekt och navigera till den i terminalen. Skapa följande filer och mappar: index.html scss/ main.scss css/ Din mappstruktur bör se ut så här:
my-sass-project/
|-- index.html
|-- scss/
| |-- main.scss
|-- css/
Öppna index.html och lägg till följande HTML-kod:
Öppna scss/main.scss och lägg till följande SASS-kod:
// Variabler
$main-color: #3498db;
$secondary-color: #2c3e50;
$font-size: 16px;
// Grundstilar
body {
font-size: $font-size;
color: $main-color;
}
header {
background-color: $secondary-color;
h1 {
color: white;
}
}
footer {
background-color: lighten($secondary-color, 10%);
p {
color: darken($main-color, 10%);
}
}Kompilera SASS till CSS I terminalen, navigera till din projekt-mapp och kör följande kommando:
sass scss/main.scss css/main.css Detta kommer att kompilera din SASS-kod till vanlig CSS och spara den i css/main.css.
Öppna index.html i en webbläsare. Du bör nu se din webbsida med de stilar som definierats i din SASS-fil.
Den här sidan designades av 21C: