Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Sass
Webdesign

Guarda e compila Sass in cinque veloci step

by
Difficulty:IntermediateLength:ShortLanguages:

Italian (Italiano) translation by Mirko Pizii (you can also view the original English article)

Final product image
What You'll Be Creating

Sass è forse il più popolare dei pre-processori dei CSS; per anni ci ha aiutato a scrivere CSS pulito, riusabile e modulare. In questo veloce tutorial, andrò dritto al punto importante e spiegherò come compilare Sass in CSS usando la linea di comando.

1. Installare Node.js

Per compilare Sass da linea di comando, dobbiamo prima installare node.js. Scaricalo dal sito ufficiale nodejs.org, apri il pacchetto e segui la procedura guidata.

2. Inizializzare NPM

NPM è un gestore di pacchetti di node per JavaScript. NPM rende facile da installare e disinstallare i pacchetti di terze parti. Per inizializzare un progetto Sass con NPM, apri il tuo terminale e fai il CD (cambio cartella) sulla cartella del tuo progetto.

Navigating to SASS-tutorial folder
Passando alla cartella del progetto Sass

Non appena sei nella cartella corretta, esegui il comando npm init. Ti verrà chiesto di rispondere a diverse domande che riguardano il progetto in modo che, NPM genererà dopo un file package.json nella tua cartella.

packagejson

3. Installare Node-Sass

Node-sass è un pacchetto NPM che compila Sass in CSS (che lo fa anche molto velocemente). PEr installare node-sass esegui il seguente comando nel tuo terminale: npm install node-sass

4. Scrivi un comando Node-sass

Tutto è pronto per scrivere un piccolo script in modo da compilare il codice Sass. Apri il file package.json in un editor di codice. Vedrai qualcosa come questo:

Nella sezione scripts aggiungi un comando scss, sotto il comando test, così come è mostrato sotto:

Procediamo attraverso questa linea parola per parola.

  1. node-sass: si riferisce al pacchetto node-sass.
  2. -watch: una impostazione facoltativa che significa "guarda tutti i file .scss nella cartella scss/ e ricompilali ogni volta che c'è un cambiamento."
  3. scss: il nome della cartella dove andremo a mettere tutti i nostri file .scss.
  4. -o css: la cartella di destinazione per i nostri CSS compilati.

Quando eseguiamo lo script, esso guarderà ogni file .scss nella cartella scss/, poi salverà il css compilato nella cartella css/ ogni volta che cambiamo un file .scss.

5. Esegui lo script

Per eseguire il nostro script a riga unica, dobbiamo eseguire il seguente comando nel terminale: npm run scss

E voila! Stiamo guardando e compilando il codice SASS.

Suggerimenti rapidi per Sass

Rimani aggiornato per altri suggerimenti veloci di Sass; c'è un'intera collezione in arrivo!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.