Accentsconagua

Se og kompilere Sass i fem raske trinn

Webdesign
Share
Hva du skal skape

Sass er kanskje den mest populære av CSS preprosessorer; i mange år har det hjulpet oss med å skrive ren, gjenbrukbar og modulær CSS. I denne korte opplæringen vil jeg kutte direkte til de tingene som betyr noe og forklare hvordan du kompilerer Sass i CSS ved hjelp av kommandolinjen.

1. Installer Node.js

For å kompilere Sass via kommandolinjen, må vi først installere node.js. Last ned den fra den offisielle nettsiden nodejs.org, åpne pakken og følg veiviseren.

2. Initialiser NPM

NPM er Node Package Manager for JavaScript. NPM gjør det enkelt å installere og avinstallere tredjepartspakker. For å initialisere et Sass-prosjekt med NPM, åpne din terminal og CD (endre katalog) til prosjektmappen din.

Naviger til Sass prosjektmappe

Kjør kommandoen i den riktige mappen npm init. Du vil bli bedt om å svare på flere spørsmål om prosjektet, hvorpå NPM vil generere en package.json filen i mappen din.

3. Installer Node-Sass

Node-sass er en NPM-pakke som samler Sass til CSS (som det også gjør veldig raskt). For å installere node-sass, kjør følgende kommando i terminalen din: npm installeringsnode-sass

4. Skriv Node-sass Command 

Alt er klart for å skrive et lite skript for å kompilere Sass. Åpne Package.json-filen i et kodeditor. Du vil se noe slikt:

"navn": "sass-opplæring", "versjon": "1.0.0", "beskrivelse": "", "main": "index.js", "scripts": "test" "Feil: ingen test oppgitt \" && avslutte 1 "," forfatter ":" "," lisens ":" ISC "

I skript seksjon legg til en SCSS kommando, under test kommando, som det er vist nedenfor:

"scripts": "test": "echo \" Feil: ingen test oppgitt \ "&& avslutte 1", "scss": "node-sass - watch scss -o css"

La oss gå gjennom denne linjen ord for ord. 

  1. node-sass: Henviser til node-sass-pakken.
  2. --se: Et valgfritt flagg som betyr "se alle .SCSS filer i SCSS / mappe og kompilere dem hver gang det er en endring. "
  3. SCSS: Mappenavnet der vi legger alle våre .scss-filer.
  4. -o css: Utdatamappen for vår kompilerte CSS.

Når vi kjører dette skriptet, vil det se alle .SCSS fil i SCSS / mappe, lagre den kompilerte css i css / mappe hver gang vi bytter a .SCSS fil.

5. Kjør skriptet

For å utføre vårt enlinjeskript må vi løse følgende kommando i terminalen: npm kjøre scss

Og voila! Vi ser og samler SASS.

Sass Quick Tips

Hold deg oppdatert for flere Sass raske tips; Det er en hel samling på vei!

Webdesign
×