Sass introduktion

Detta är vad du bör veta

Innan du fortsätter, bör du ha en grundläggande förståelse för följande:

  • HTML
  • CSS

Om du vill lära dig dessa ämnen först, besök vår Hem Besök dessa tutorial på webbplatsen.

Vad är Sass?

  • Sass betyder Syntactically Awesome Stylesheet (en fantastisk syntaks för stilarkiv)
  • Sass är en CSS-utökning
  • Sass är en CSS-preprocessor
  • Sass är helt kompatibel med alla versioner av CSS
  • Sass minskar CSS-repetition, vilket sparar tid
  • Sass är designad av Hampton Catlin och utvecklad av Natalie Weizenbaum 2006
  • Sass kan laddas ner och användas gratis

Varför använda Sass?

Stilarkiv blir större och mer komplexa, och svårare att underhålla. Detta är där en CSS-preprocessor kan hjälpa till.

Sass låter dig använda egenskaper som inte finns i CSS, som variabler, inbäddade regler, mixin, import, arv, inbyggda funktioner och andra funktioner.

Ett användbart enkelt exempel på Sass

Anta att vi har en webbplats med tre huvudsakliga färger:

#a2b9bc
#b2ad7f
#878f99

Hur många gånger behöver du skriva dessa HEX-värden? Många gånger. Vad om samma färg ändras?

Du kan skriva följande kod i Sass, istället för att flera gånger skriva de ovanstående värdena:

Sass exempel

/* Definiera variabler för den ursprungliga färgen */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
$primary_3: #878f99;
/* Använd variabler */
.main-header {
  background-color: $primary_1;
}
.menu-left {
  background-color: $primary_2;
}
.menu-right {
  background-color: $primary_3;
}

Så, när du använder Sass, om den ursprungliga färgen ändras, behöver du bara ändra den på ett ställe.

Hur fungerar Sass?

Webbläsaren förstår inte Sass-koden. Därför behöver du en Sass-voorbehandlare för att konvertera Sass-koden till standard CSS.

Denna process kallas översättning (transpiling). Så, du behöver ge översättaren (ett program) Sass-koden och sedan få CSS-koden tillbaka.

Tips:Översättning är ett termer som används för att översätta källkod skriven i ett språk till ett annat språk.

Sass filtyp

Filändelsen för Sass-filer är ".scss".

Sass kommentarer

Sass stöder standard CSS-kommentarer /* kommentar */，dessutom stöder vi kommentarer i raden // kommentar:

Sass exempel

/* Definiera huvudfärgerna */
$primary_1: #a2b9bc;
$primary_2: #b2ad7f;
/* Använd variabler */
.main-header {
  background-color: $primary_1; // Du kan lägga till kommentarer här
}