Hvordan installere og komme i gang med Sass?

Syntaktisk fantastiske stilark (SASS), en utvidelse av CSS som forhåndsbehandler CSS og fungerer bra med alle versjonene og forbedrer muligheten til det grunnleggende språket. Det sparer mye tid og krefter ved å forhindre at brukerne bruker overflødige CSS -verdier. Dessuten kan du laste ned og bruke Sass gratis. I denne oppskrivningen vil vi fortelle deg hvordan du skal installere og begynne med Sass.

Hvordan installere og begynne med sass

Installasjonsprosedyren for SASS kan utføres på forskjellige måter som å bruke noen open source-applikasjoner, installere SASS ved hjelp fra GitHub -depotet.

La oss diskutere disse installasjonsprosedyrene i detalj.

Installer SASS ved hjelp av applikasjoner

Det er mange applikasjoner tilgjengelig (betalt og gratis) som hjelper deg å installere og kjøre Sass på kort tid for Windows, Mac OS og Linux. Noen applikasjoner er listet opp nedenfor.

1. Prepos (betalt) for Windows, Mac og Linux.
2. CodeKit (betalt) for Mac.
3. Hammer (betalt) for Mac.
4. Koala (gratis) for Mac, Linux og Windows.
5. Scout-app (gratis) for Linux, Mac og Windows.

Merk: Det er ikke nødvendig å bruke de betalte applikasjonene for de første utviklingsfasene fordi de gratis er fullt funksjonelle.

Installer sass ved hjelp av kommandolinje

Nedenfor har vi diskutert hvordan du kan installere SASS ved hjelp av kommandolinjen på forskjellige plattformer.

Installere hvor som helst (frittstående)

Du kan med stor letthet installere sass på hvilken som helst plattform som Mac OS, Linux, Windows ved å laste ned pakken som er relevant for plattformen du bruker, fra GitHub Repository. Når du er lastet ned, inkluderer pakken i din vei. En slik installasjon krever ingen avhengigheter, derfor er det den enkleste tilnærmingen.

Installere gjennom NPM

Hvis du er en node.JS -bruker, så kan du bruke følgende npm -kommando og installere pakken til SASS.

npm install -g sass

Kommandoen over installerer en ren JS -implementering av SASS som er litt tregere enn andre tilgjengelige installasjonsalternativer. Imidlertid, hvis du ønsker å forbedre hastigheten, kan du endre implementeringen til alle andre siden JS -implementeringen har samme grensesnitt som andre implementeringer.

Installere gjennom sjokolade

Hvis du har et Windows -operativsystem og også har en sjokoladepakkebehandler installert, bruker du følgende kommando for å installere Dart Sass.

Choco installer Sass

Installere gjennom homebrew

Mac OS X- og Linux -brukere kan installere SASS -pakken ved å bruke Homebrew Package Manager gjennom følgende kommando.

Brygg install sass/sass/sass

Installer sass på koderedaktører

Som allerede nevnt kan du bruke SASS på forskjellige kodedaktører som VS -kode, sublime, atom osv. Dette kan være et foretrukket alternativ for mange siden de fleste av oss allerede er kjent med mange populære kodedaktører. For eksempel, for forståelse, vil vi her demonstrere hvordan du kan bruke SASS på VS -kode.

Trinn 1

Besøk Live Sass Compiler og trykk installasjon for å laste ned utvidelsen.

Steg 2

Så snart du trykker på Install -knappen, åpnes utvidelsen i VS -kodeditoren din.

Trykk nå på den uthevede installasjonsknappen, og utvidelsen vil bli installert i kodeditoren.

Utvidelse installert vellykket!

Merk: Når utvidelsen er installert, kan du bruke Ctrl + skift + x Å åpne utvidelsen når du vil ha.

Trinn 3

Nå kan du åpne .SCSS -fil og begynn å skrive stilark. Når du har gjort dette, vil du legge merke til et alternativ som sier "Se Sass" i redaktøren.

Klikk på dette alternativet for å generere CSS -kartfilen, og CSS -filen automatisk. Senere kan du koble denne CSS -filen til HTML -dokumentet ditt.

Følg de ovennevnte trinnene for enkelt å installere SASS på VS-kodeditoren din.

Konklusjon

Du kan installere og komme i gang med SASS ved å bruke forskjellige måter som å bruke noen open source-applikasjoner, installere den ved hjelp av kommandolinjen, installere den på de ønskede kodedaktørene som VS-kode, sublim, atom osv. Eller installere den hvor som helst fra GitHub -depotet. Du kan velge hvilket som helst av alternativene avhengig av ditt letthet og ønske. Alle disse alternativene er blitt forklart i dybden i dette innlegget.