SASS-syntaks og SCSS-syntaks

Denne artikkelen forklarer SASS-syntaksen og SCSS-syntaksen.

Vi vil forklare i detalj forskjellene mellom SASS- og SCSS-syntaksene, og gi konkrete eksempler for å utdype forståelsen din.

YouTube Video

SASS-syntaks og SCSS-syntaks

SASS er et stilark-språk designet for å utvide mulighetene til CSS. SASS har to syntakser. Disse er SASS-syntaksen og SCSS-syntaksen.

Oversikt over SASS og SCSS

SASS-syntaks

SASS-syntaksen skrives slik:.

 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 innrykkbasert syntaks som ikke bruker krøllparenteser {} eller semikolon ;.
• Den er laget for å skrive konsis og lettlest kode.
• Filendelsen er .sass.

SCSS-syntaks

SCSS-syntaksen skrives slik:.

 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 lik CSS, som bruker krøllparenteser {} og semikolon ;.
• Svært kompatibel med eksisterende CSS-kode, slik at CSS kan konverteres direkte til en SCSS-fil.
• Filendelsen er .scss.

Hovedforskjellene mellom SASS og SCSS

Utvalgskriterier

Hvilken du bør bruke avhenger av prosjektets og teamets behov.

• Når bør du velge SASS-syntaks

  • SASS-syntaksen lar deg skrive konsis og ryddig kode.
  • Hvis hele teamet er kjent med SASS-syntaks, er det et passende valg.

• Når bør du velge SCSS-syntaks

  • Hvis kompatibilitet med CSS er viktig og mange i teamet kjenner til CSS, er SCSS-syntaksen mer egnet.

Fordelene med SASS og SCSS

Følgende er vanlige fordeler med både SASS- og SCSS-syntaksen:.

1. Bruk av variabler

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

• Ved å bruke variabler kan du definere en stil på ett sted og gjenbruke den flere steder. Designendringer kan brukes overalt ved å bare endre variabelverdiene, noe som forbedrer vedlikeholdbarheten.

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 lar deg gruppere stiler eller leverandør-spesifikk kode som brukes gjentatte ganger flere steder, og bruke dem fleksibelt med argumenter. Dette reduserer kode-duplisering og forbedrer vedlikeholdbarheten.

3. Nøstede 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 å bruke nøsting kan du skrive stiler hierarkisk i henhold til HTML-strukturen, noe som gjør det lettere å gruppere relaterte regler. Dette forbedrer både lesbarheten og vedlikeholdbarheten av koden.

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}

• Ved å bruke arv kan du gruppere og gjenbruke felles stiler. Dette reduserer kode-duplisering og opprettholder et konsistent design.

Konklusjon

Valget mellom SASS og SCSS avhenger av utviklerens preferanser og prosjektenes krav.

SASS-syntaksen fremhever enkelhet, mens SCSS-syntaksen fremhever CSS-kompatibilitet. Begge syntaksene er kraftige og kan øke CSS-produktiviteten betydelig.

Å velge det mest egnede alternativet for prosjektet ditt muliggjør effektiv stilarkhåndtering.

Du kan følge med på artikkelen ovenfor ved å bruke Visual Studio Code på vår YouTube-kanal. Vennligst sjekk ut YouTube-kanalen.

YouTube Video