Se si re la lettura di questo che probabilmente significa che si ha familiarità con i CSS e hanno sentito parlare di SCSS o Sass ma non ho ancora preso l’immersione.,
Beh una buona notizia. Sass sta per rendere la vita molto migliore. Sarai finalmente in grado di ASCIUGARE (non ripetere te stesso) il tuo codice in CSS.
Fondamentalmente, CSS manca alcune grandi caratteristiche che aiuterebbero a trasformarlo in un più facile da usare e leggere. Sass aggiunge variabili, nidificazione, parziali, Mixin, Estensione / ereditarietà e operatori. Alcune di queste sono cose che i linguaggi di programmazione tendono ad avere., Se non sai cosa sono alcuni di loro, va bene. Stiamo andando a definire ciascuno di questi e vi mostrerà come possono essere utilizzati.
Un Sass può essere compilato in un file CSS che lo rende facile scrivere molti file.
Se stai usando create react app sei fortunato perché la parte di elaborazione è già stata curata per te. In caso contrario, puoi usare Grunt o Gulp per elaborare i tuoi file Sass/SCSS in CSS. Se non sei ancora in un ambiente che lo farà, ti suggerisco di impostarlo per primo. Questo articolo è quello di parlare delle caratteristiche di Sass e come usarli.,
Qual è la differenza tra Sass e SCSS. Bene, entrambi possono essere compilati in CSS. La vera differenza è nella sintassi. SCSS utilizza principalmente la stessa sintassi di CSS mentre Sass toglie parentesi graffe e punti e virgola. In entrambi è possibile utilizzare le funzionalità aggiuntive fornite da Sass.
Quanto segue mostra le differenze sintattiche.
Se usi un linguaggio di codifica sai cos’è una variabile. Quindi non andrò troppo in profondità con questo. Essenzialmente Sass finalmente ti permette di definire le variabili in modo che se decidi di cambiare un colore non devi cambiarlo 1000 volte., Puoi semplicemente cambiare la tua variabile di colore primaria in un posto e sei a posto
$primary-color: #333; body {
background-color: $primary-color;
}.text {
color: $primary-color;
}
Nidificazione
In CSS non puoi nidificare. Diamo un’occhiata a questi due selettori. Non c’è niente di terribilmente sbagliato in questo. Ma stiamo ripetendo il codice.
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
Possiamo nidificare in Sass in questo modo. Questo sembra molto più pulito.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
Partial
I partial sono file Sass o Scss che hanno un carattere di sottolineatura nella parte anteriore del nome del file. Biru. “_test.scss”. Che cosa fa questo?, Indica che questo particolare file non dovrebbe essere trasformato in CSS quando arriva il momento. Questi file conterranno frammenti di CSS che possono poi essere importati da altri file SCSS.
Questo è un ottimo modo per modulare il tuo CSS e mantenere le cose più facili da mantenere. Ad esempio, potresti voler memorizzare le variabili che verranno utilizzate in più file. Questo è il modo di farlo.
Mixins
I mixins sono interessanti perché aggiungono una funzionalità simile al linguaggio di codifica. Riconoscerai immediatamente cosa intendo vedendo il codice:
Invece di digitare “ruota(30deg)” 3 volte., È possibile creare ciò che si sente essenzialmente come una funzione e una sorta di atti come uno. Si passa nella proprietà al mixin transform ().
Per utilizzare questo pezzo di codice, è necessario utilizzare la parola chiave “@include”.
Maggiori informazioni se si fa clic qui.
Extend/Inheritance& Operatori
Ne parlerò nella Parte 2 in quanto sono un po ‘ più coinvolti. Queste sono alcune delle caratteristiche più utili in SCSS quindi per favore segui e pubblicherò questo blog la prossima settimana!
Per favore seguimi su Twitter @thedrewprint e trovami su LinkedIn a Andrew Richards., Grazie per la lettura!