SASS-syntaks og SCSS-syntaks

Denne artikel forklarer SASS-syntaksen og SCSS-syntaksen.

Vi gennemgår i detaljer forskellene mellem SASS- og SCSS-syntakserne og giver konkrete eksempler for at uddybe din forståelse.

YouTube Video

SASS-syntaks og SCSS-syntaks

SASS er et stylesheet-sprog designet til at udvide mulighederne i CSS. SASS har to syntakser. Disse er SASS-syntaksen og SCSS-syntaksen.

Oversigt over SASS og SCSS

SASS-syntaks

SASS-syntaksen skrives således:.

 1$primary-color: #3498db
 2$secondary-color: #2ecc71
 3
 4body
 5    font-family: Arial, sans-serif
 6    color: $primary-color
 7
 8h1
 9    font-size: 2rem
10    color: $secondary-color
11
12    &:hover
13        text-decoration: underline

• En indrykningsbaseret syntaks, der ikke bruger krøllede parenteser {} eller semikolon ;.
• Den er designet til at skrive kortfattet og letlæselig kode.
• Filendelsen er .sass.

SCSS-syntaks

SCSS-syntaksen skrives således:.

 1$primary-color: #3498db;
 2$secondary-color: #2ecc71;
 3
 4body {
 5    font-family: Arial, sans-serif;
 6    color: $primary-color;
 7}
 8
 9h1 {
10    font-size: 2rem;
11    color: $secondary-color;
12
13    &:hover {
14        text-decoration: underline;
15    }
16}

• En syntaks, der ligner CSS og bruger krøllede parenteser {} og semikolon ;.
• Meget kompatibel med eksisterende CSS-kode, hvilket gør det muligt at konvertere CSS direkte til en SCSS-fil.
• Filendelsen er .scss.

Vigtigste forskelle mellem SASS og SCSS

Udvælgelseskriterier

Hvilken man skal bruge, afhænger af projektets og teamets behov.

• Hvornår skal man vælge SASS-syntaks

  • SASS-syntaksen gør det muligt at skrive kortfattet og ryddelig kode.
  • Hvis hele teamet er fortrolig med SASS-syntaksen, er det et passende valg.

• Hvornår skal man vælge SCSS-syntaks

  • Hvis kompatibilitet med CSS er vigtig, og flere i teamet er fortrolige med CSS, er SCSS-syntaksen mere egnet.

Fordele ved SASS og SCSS

Følgende er fælles fordele ved både SASS- og SCSS-syntaks:.

1. Brug af variabler

1$font-stack: Helvetica, sans-serif;
2$primary-color: #333;
3
4body {
5    font: 100% $font-stack;
6    color: $primary-color;
7}

• Ved at bruge variabler kan du definere en stil ét sted og genbruge den flere steder. Designændringer kan anvendes overalt blot ved at ændre variabelværdierne, hvilket forbedrer vedligeholdelsen.

2. Mixins

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

• Mixins giver dig mulighed for at gruppere stilarter eller leverandør-præfiks-kode, der bruges gentagne gange flere steder, og bruge dem fleksibelt med argumenter. Dette reducerer kode-duplikation og forbedrer vedligeholdelsen.

3. Indlejrede regler

 1nav {
 2    ul {
 3        margin: 0;
 4        padding: 0;
 5        list-style: none;
 6    }
 7
 8    li { display: inline-block; }
 9    a { text-decoration: none; }
10}

• Ved at bruge nesting kan du skrive stilarter hierarkisk efter HTML-strukturen, hvilket gør det lettere at gruppere relaterede regler. Dette forbedrer både kodens læsbarhed og vedligeholdelse.

4. Nedarvning

 1%button-style {
 2    display: inline-block;
 3    padding: 10px 20px;
 4    font-size: 16px;
 5}
 6
 7.btn-primary {
 8    @extend %button-style;
 9    background-color: blue;
10    color: white;
11}
12
13.btn-secondary {
14    @extend %button-style;
15    background-color: gray;
16    color: black;
17}

• Ved at bruge arv kan du gruppere og genbruge fælles stilarter. Dette reducerer kode-duplikation og opretholder et ensartet design.

Konklusion

Valget mellem SASS og SCSS afhænger af udviklerens præferencer og projektets krav.

SASS-syntaksen lægger vægt på enkelhed, mens SCSS-syntaksen lægger vægt på CSS-kompatibilitet. Begge syntakser er kraftfulde og kan øge produktiviteten med CSS betydeligt.

Ved at vælge den mest egnede mulighed til dit projekt kan du administrere stylesheets mere effektivt.

Du kan følge med i ovenstående artikel ved hjælp af Visual Studio Code på vores YouTube-kanal. Husk også at tjekke YouTube-kanalen.

YouTube Video