Hvis du re leser dette det betyr sannsynligvis at du er kjent med CSS, og har hørt av SCSS eller Sass, men ennå ikke har tatt dykke.,
Vel gode nyheter. Sass kommer til å gjøre livet ditt mye bedre. Du vil til slutt være i stand til å TØRKE (ikke Gjenta deg Selv) din kode i CSS.
i Utgangspunktet, CSS mangler noen flotte funksjoner som vil hjelpe slå den inn i en enkel å bruke og lese. Sass legger Variabler, Nesting, Partials, Mixins, Utvide/Arv, og Operatører. Noen av disse er ting som programmeringsspråk har en tendens til å ha., Hvis du ikke vet hva noen av dem er, det er helt greit. Vi kommer til å definere hver av disse og viser deg hvordan de kan brukes.
En Sass kan bli kompilert til en CSS-filer gjør det skrive mange filer enkelt.
Hvis du bruker opprette reagere app du er på hell fordi behandlingen del er allerede tatt vare på for deg. Hvis ikke kan du bruke Grynt eller Jafs å behandle dine Sass/SCSS filer til CSS. Hvis du ennå ikke er i et miljø som vil gjøre dette jeg foreslår å sette det opp først. Denne artikkelen er snakk om funksjoner av Sass og hvordan du bruker dem.,
Hva er forskjellen mellom Sass og SCSS. Vel, både av dem kan kompileres til CSS. Den virkelige forskjellen er i syntaks. SCSS bruker stort sett den samme syntaksen av CSS mens Sass tar bort krøllparentes og semi-kolon. I både du kan bruke de ekstra funksjonene som Sass gir.
følgende viser syntaktiske forskjeller.
Hvis du bruker noen koding språket du vite hva en variabel er. Så jeg vil ikke gå så i dybden med dette. I hovedsak Sass til slutt gir deg mulighet til å definere variabler, slik at hvis du bestemmer deg for å endre si en farge du trenger ikke å endre det 1000 ganger., Du kan bare endre den primære fargen variabel på ett sted, og du er godt å gå
$primary-color: #333; body {
background-color: $primary-color;
}.text {
color: $primary-color;
}
Hekkende
I CSS-du kan ikke reir. La oss ta en titt på disse to velgere. Det er noe fryktelig galt med dette. Men vi er repeterende kode.
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
Vi kan hekke i Sass som så. Dette ser mye renere.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
Partials
Partials er Sass eller Scss filer som har en understrek i foran filnavnet. Eksempelvis. «_test.scss». Hva gjør dette?, Det viser at denne filen burde ikke være omgjort til CSS-når den tid kommer. Disse filene inneholder utdrag av CSS som deretter kan importeres av andre SCSS filer.
Dette er en flott måte å modularize CSS og holde ting enklere å vedlikeholde. Du kan For eksempel ønsker å lagre variabler som vil bli brukt i flere filer. Dette er måten å gjøre det på.
Mixins
Mixins er interessante fordi de kan legge til en koding av språk-som-funksjonen. Du vil umiddelbart gjenkjenne hva jeg mener ved å se koden:
i Stedet for å skrive ut «roter(30deg)» 3 ganger., Du kan lage det egentlig føles som en funksjon og form av handlinger som en. Du passere i holderen til transform() mixin.
for Å bruke denne delen av koden, må du bruke «@inkluderer søkeord.
Mer info om du klikker her.
Utvide/Arv & Operatører
jeg vil snakke om disse i Del 2 som de er litt mer involvert. Disse er noen av de mest nyttige funksjonene i SCSS så følg og jeg vil være å poste denne bloggen neste uke!
følg meg på Twitter @thedrewprint og finne meg på LinkedIn på Andrew Richards., Takk for at du leser!