SASS-syntax och SCSS-syntax

Den här artikeln förklarar SASS- och SCSS-syntaxen.

Vi kommer att förklara skillnaderna mellan SASS- och SCSS-syntaxerna i detalj och ge konkreta exempel för att fördjupa din förståelse.

YouTube Video

SASS-syntax och SCSS-syntax

SASS är ett stilmallspråk som är utformat för att utöka CSS:s möjligheter. SASS har två olika syntaxer. Dessa är SASS-syntaxen och SCSS-syntaxen.

Översikt av SASS och SCSS

SASS-syntax

SASS-syntaxen skrivs på följande sätt:.

 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 indenteringsbaserad syntax som inte använder måsvingar {} eller semikolon ;.
• Den är utformad för att skriva kortfattad och lättläst kod.
• Filändelsen är .sass.

SCSS-syntax

SCSS-syntaxen skrivs på följande sätt:.

 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 syntax liknande CSS, som använder måsvingar {} och semikolon ;.
• Mycket kompatibel med befintlig CSS-kod, vilket gör att CSS kan konverteras direkt till en SCSS-fil.
• Filändelsen är .scss.

Huvudsakliga skillnader mellan SASS och SCSS

Urvalskriterier

Vilken syntax man ska använda beror på projektets och teamets behov.

• När ska man välja SASS-syntax

  • SASS-syntaxen gör det möjligt att skriva kortfattad och ren kod.
  • Om hela teamet är bekant med SASS-syntaxen är det ett bra val.

• När ska man välja SCSS-syntax

  • Om kompatibilitet med CSS är viktigt och många i teamet känner till CSS, är SCSS-syntaxen mer lämplig.

Fördelar med SASS och SCSS

Följande är vanliga fördelar med både SASS- och SCSS-syntax:.

1. Användning av variabler

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

• Genom att använda variabler kan du definiera en stil på ett ställe och återanvända den på flera platser. Designändringar kan tillämpas överallt genom att helt enkelt ändra variabelvärdena, vilket förbättrar underhållbarheten.

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 låter dig gruppera stilar eller kod med leverantörsprefix som används upprepade gånger på flera ställen och applicera dem flexibelt med hjälp av argument. Detta minskar kodduplicering och förbättrar underhållbarheten.

3. Nästa 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}

• Genom att använda nästning kan du skriva stilar hierarkiskt enligt HTML-strukturen, vilket gör det enklare att gruppera relaterade regler. Detta förbättrar både kodläsbarhet och underhållbarhet.

4. Arv

 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}

• Genom att använda arv kan du gruppera och återanvända gemensamma stilar. Detta minskar kodduplicering och upprätthåller en konsekvent design.

Slutsats

Att välja mellan SASS och SCSS beror på utvecklarens preferenser och projektets krav.

SASS-syntaxen betonar enkelhet, medan SCSS-syntaxen betonar kompatibilitet med CSS. Båda syntaxerna är kraftfulla och kan kraftigt förbättra produktiviteten med CSS.

Att välja det mest lämpliga alternativet för ditt projekt möjliggör effektiv hantering av stilmallar.

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.

YouTube Video