Iniziare con Sass: imparare le basi e la sua installazione

Forse hai già sentito parlare di Sass (Syntacically Awesome StyleSheets) e ti interessa, ma non hai idea di come configurarlo o incorporarlo nel tuo progetto. Nella forma più elementare, Sass è noto come processore CCS, il che rende possibile che la scrittura CCS diventi più efficace e veloce. Esamineremo le nozioni di base e le installazioni di Sass sia per Mac che per Windows.

L'apprendimento di base sul Sass

Ci sono alcune curve di apprendimento quando si tratta dell'uso e della configurazione di Sass. Per poter andare avanti con il progetto Sass, devi avere almeno una conoscenza di base di HTML e CSS. Devi essere abile o competente con i CSS prima di provare a imparare il processore CSS, che è il Sass.

Se hai mai cambiato i colori nel tuo foglio di stile per molto tempo o desideri che ci sia un modo migliore, o hai già il tuo foglio di stile coperto con i prefissi del fornitore, o hai notato che i tuoi fogli di stile erano più lunghi e difficili da mantenere, forse questi motivi erano sufficienti per provare a studiare Sass. Riassumerò alcuni dei termini per cui puoi comprendere le basi di Sass.

• Variabile – è un contenitore di archiviazione per il valore CSS come numeri e colori. La sintassi è stata scritta come “$variable”. Questo codice può essere utilizzato nell'intero foglio di stile dopo averlo definito.
• Nidificazione – riduce la ripetitività nel codice e ha la capacità di rendere la scrittura dei CSS più semplice e veloce.
• Parziali – questi sono i file CSS che iniziano con il carattere di sottolineatura “_partial.scss” e non sono compilati sui propri file CSS ma importati nel file principale.
• Importare – utilizzare “@import” per compilare tutti i partial in un unico file.
• Mixin – utilizzare “@mixin” per i CSS ripetitivi, come quando erano richiesti i prefissi del fornitore.
• Estendere – utilizzare “@extend” per modificare alcuni aspetti della chiave di elementi altrimenti della stessa identità, come un gruppo di pulsanti di colori diversi.
• Operatori – questo consente all'utente di utilizzare calcoli matematici nel CSS, come definire la larghezza di diverse parti dei layout.

Installazione di Sass su Mac e Windows

Sass funziona con il linguaggio di programmazione Ruby, quindi Ruby deve essere installato sul tuo computer. Per gli utenti Mac, Ruby è già preinstallato su OSX. Controlla per assicurarti di avere la versione aggiornata digitando "ruby - v". Se il numero è inferiore a 2.0.0, digita "do gem install ruby" per aggiornare. Ora puoi iniziare a installare Sass.

Tuttavia, in Windows, l'installazione è un po' più complicata perché non è installato Ruby. Se utilizzi una versione a 64 bit di Windows 7, scegli Ruby 2.1.7 (x54). La stessa cosa va fatta anche per Windows 8 e 10. Assicuratevi di scegliere “Aggiungi eseguibile Ruby nel vostro PERCORSO” quindi continuate. Una volta installato Ruby, apri il prompt dei comandi e conferma che Ruby è stato installato. Quindi puoi installare Sass digitando "gem installa sass" e sei a posto.

RailsCarma ha lavorato sul framework Ruby on Rails sin dalla sua fase nascente e ha gestito oltre 250 progetti RoR. Dai un'occhiata al nostro portafoglio per capire come stiamo contribuendo a cambiare la forma dell'industria del software fornendo Sviluppatore di Ruby on Rails. Mettiti in contatto con noi adesso!