Hvis du læser dette igen, betyder det du er bekendt med CSS og har hørt om SCSS eller Sass, men har endnu ikke taget dykket.,
god nyhed. Sass vil gøre dit liv meget bedre. Du vil endelig være i stand til at tørre (gentag ikke dig selv) din kode ud i CSS.grundlæggende mangler CSS nogle fantastiske funktioner, der vil hjælpe med at gøre det til en lettere at bruge og læse. Sass tilføjer variabler, Nesting, Partialer, mi .ins, udvide/arv, og operatører. Nogle af disse er ting, som programmeringssprog har tendens til at have., Hvis du ikke ved, hvad nogle af dem er, er det okay. Vi vil definere hver af disse og vise dig, hvordan de kan bruges.
en sass kan kompileres til en CSS-filer gør det nemt at skrive mange filer.
Hvis du bruger create react-app, er du heldig, fordi behandlingsdelen allerede er taget hånd om for dig. Hvis ikke kan du bruge Grunt eller Gulp til at behandle dine SASS/SCSS filer i CSS. Hvis du endnu ikke er i et miljø, der vil gøre dette, foreslår jeg at oprette det først. Denne artikel er at tale om funktionerne i Sass og hvordan man bruger dem.,
Hvad er forskellen mellem Sass og SCSS. Nå, begge kan kompileres til CSS. Den reelle forskel er i syntaks. SCSS bruger for det meste den samme syntaks af CSS, mens sass fjerner krøllede seler og halvkolon. I begge kan du bruge de ekstra funktioner, som sass giver.
Følgende viser de syntaktiske forskelle.
Hvis du bruger et kodningssprog, ved du, hvad en variabel er. Så jeg vil ikke gå for dybt med dette. Hovedsagelig Sass endelig giver dig mulighed for at definere variabler, så hvis du beslutter at ændre sige en farve, du ikke behøver at ændre det 1000 gange., Du kan bare ændre din primære farvevariabel et sted, og du er god til at gå
$primary-color: #333; body {
background-color: $primary-color;
}.text {
color: $primary-color;
}
Nesting
i CSS kan du ikke reden. Lad os se på disse to vælgere. Der er ikke noget galt med dette. Men vi gentager koden.
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
Vi kan reden i Sass som sådan. Det ser meget renere ud.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
Partialer
Partialer er Sass-eller Scss-filer, der har en understregning foran filnavnet. Eksempel. “_test.scss”. Hvad gør det her?, Det betyder, at denne særlige fil ikke skal omdannes til CSS, når tiden kommer. Disse filer vil indeholde uddrag af CSS, der derefter kan importeres af andre SCSS-filer.
Dette er en fantastisk måde at modularisere din CSS og holde tingene lettere at vedligeholde. For eksempel kan du ønsker at gemme variabler, der vil blive brugt i flere filer. Dette er måden at gøre det på.
mi .ins
mi .ins er interessante, fordi de tilføjer en kodende sproglignende funktion. Du genkender straks, hvad jeg mener, når du ser koden:
i stedet for at skrive “rotere(30deg)” 3 gange., Du kan oprette, hvad der i det væsentlige føles som en funktion og slags handlinger som en. Du passerer i ejendommen til transform () mi .in.
for at bruge dette stykke kode, skal du bruge søgeordet “@include”.
Mere info hvis du klikker her.
Udvid / arv & operatører
Jeg vil tale om disse i Del 2, da de er lidt mere involverede. Dette er nogle af de mest nyttige funktioner i SCSS, så følg venligst, og jeg vil sende denne blog i næste uge!
Følg mig på T .itter @thedre .print og find mig på LinkedIn på andre.Richards., Tak for læsning!