Grunderna i SASS

Articles

Grunderna i SASS

Den här artikeln förklarar grunderna i SASS.

Vi förklarar de grundläggande funktionerna i SASS steg för steg och visar hur man använder dem med praktiska exempelkoder.

YouTube Video

Grunderna i SASS

SASS (Syntactically Awesome Stylesheets) är ett stilmallspråk som utökar CSS. Genom att använda SASS kan du dra nytta av avancerade funktioner som inte är tillgängliga i CSS, såsom variabler, nästling, mixins och arv. Detta gör hantering och återanvändning av stilmallar mycket enklare.

Vad är SASS?

SASS är ett språk som förenklar CSS-skrivandet samtidigt som det möjliggör mer flexibel och kraftfull design. SASS erbjuder även SCSS (Sassy CSS)-syntaxen, som liknar den vanliga CSS-syntaxen. Här är ett exempel:.

Exempel på SCSS

1$base-font: Arial, sans-serif;
2$bg-color: #f4f4f4;
3
4body {
5    font-family: $base-font;
6    background-color: $bg-color;
7}

Exempel på CSS

1body {
2    font-family: Arial, sans-serif;
3    background-color: #f4f4f4;
4}

Att installera SASS

Hur du installerar

För att använda SASS installerar du först Node.js och sedan SASS med följande kommando:.

1npm install -g sass

Hur du kompilerar

För att kompilera SASS-filer (.scss eller .sass) till CSS, använd följande kommando:.

1sass input.scss output.css

Du kan också använda alternativet 'watch' för att övervaka filändringar och utföra realtidskompilering.

Variabler

SASS låter dig använda variabler för att återanvända värden som färger och teckenstorlekar.

Exempelkod

1$primary-color: #3498db;
2$font-stack: 'Roboto', sans-serif;
3
4body {
5    color: $primary-color;
6    font-family: $font-stack;
7}

Den här koden använder SASS-variabler för att definiera färger och typsnitt, och återanvänder dem inom 'body'-väljaren för att öka konsekvens och underhållbarhet.

Kompilerat resultat

1body {
2    color: #3498db;
3    font-family: 'Roboto', sans-serif;
4}

Nästling

SASS förbättrar kodens läsbarhet genom att tillåta nästlade CSS-väljare.

Exempelkod

 1nav {
 2    ul {
 3        list-style: none;
 4        margin: 0;
 5        padding: 0;
 6
 7        li {
 8            display: inline-block;
 9
10            a {
11                text-decoration: none;
12                color: #333;
13
14                &:hover {
15                    color: #3498db;
16                }
17            }
18        }
19    }
20}

Den här koden använder nästlad hierarki för att visuellt tydliggöra struktureringen av stilarna.

Kompilerat resultat

 1nav ul {
 2    list-style: none;
 3    margin: 0;
 4    padding: 0;
 5}
 6
 7nav ul li {
 8    display: inline-block;
 9}
10
11nav ul li a {
12    text-decoration: none;
13    color: #333;
14}
15
16nav ul li a:hover {
17    color: #3498db;
18}

Mixins

Mixins gör det möjligt att återanvända kod för flera olika väljare.

Exempelkod

 1@mixin border-radius($radius) {
 2    border-radius: $radius;
 3    -webkit-border-radius: $radius;
 4    -moz-border-radius: $radius;
 5}
 6
 7button {
 8    @include border-radius(10px);
 9}
10
11.card {
12    @include border-radius(5px);
13}

Den här koden definierar en 'border-radius'-stil med hjälp av '@mixin' och återanvänder den i 'button' och '.card' med '@include', vilket möjliggör effektiv stilhantering utan duplicering.

Kompilerat resultat

 1button {
 2    border-radius: 10px;
 3    -webkit-border-radius: 10px;
 4    -moz-border-radius: 10px;
 5}
 6
 7.card {
 8    border-radius: 5px;
 9    -webkit-border-radius: 5px;
10    -moz-border-radius: 5px;
11}

Arv (@extend)

Arv låter dig använda existerande stilar på andra väljare.

Exempelkod

 1%button-style {
 2    padding: 10px 20px;
 3    color: white;
 4    background-color: #3498db;
 5}
 6
 7button {
 8    @extend %button-style;
 9    border: none;
10}
11
12.link-button {
13    @extend %button-style;
14    text-decoration: none;
15}

Den här koden definierar en platshållarväljare '%button-style' och använder '@extend' för att tillämpa gemensamma stilar på både 'button' och '.link-button', vilket främjar återanvändning och konsekvens.

Kompilerat resultat

 1button, .link-button {
 2    padding: 10px 20px;
 3    color: white;
 4    background-color: #3498db;
 5}
 6
 7button {
 8    border: none;
 9}
10
11.link-button {
12    text-decoration: none;
13}

Villkor och loopar

SASS stödjer villkor och loopar för att dynamiskt skapa stilar.

Exempel på villkorssats

1$theme: dark;
2
3body {
4    background-color: if($theme == light, #fff, #333);
5    color: if($theme == light, #333, #fff);
6}

Den här koden använder SASS-funktionen 'if' för att växla bakgrunds- och textfärger baserat på värdet av '$theme', vilket möjliggör dynamisk stiltilldelning med hjälp av villkor.

Exempel på loop

1@for $i from 1 through 3 {
2    .column-#{$i} {
3        width: calc(100% / $i);
4    }
5}

Den här koden använder en SASS '@for'-loop för att dynamiskt generera klasser från '.column-1' till '.column-3'.

Kompilerat resultat

 1body {
 2    background-color: #333;
 3    color: #fff;
 4}
 5
 6.column-1 {
 7    width: 100%;
 8}
 9
10.column-2 {
11    width: 50%;
12}
13
14.column-3 {
15    width: 33.3333%;
16}

Filuppdelning och importering

SASS låter dig dela upp filer och återanvända dem med @use eller @import.

Filstruktur

styles/
  _variables.scss
  _mixins.scss
  main.scss

_variables.scss

1$primary-color: #3498db;

_mixins.scss

1@mixin flex-center {
2    display: flex;
3    justify-content: center;
4    align-items: center;
5}

main.scss

1@use 'variables';
2@use 'mixins';
3
4header {
5    background-color: variables.$primary-color;
6    @include mixins.flex-center;
7}

Kompilerat resultat

1header {
2  background-color: #3498db;
3  display: flex;
4  justify-content: center;
5  align-items: center;
6}

Sammanfattning

Genom att använda SASS förenklas CSS-skrivandet och kodens återanvändbarhet och underhåll förbättras.

Du kan följa med i artikeln ovan med hjälp av Visual Studio Code på vår YouTube-kanal. Vänligen kolla även in YouTube-kanalen.