om du läser detta igen betyder det förmodligen att du är bekant med CSS och har hört talas om scss eller sass men ännu inte har tagit dyket.,
goda nyheter. Sass kommer att göra ditt liv mycket bättre. Du kommer äntligen att kunna torka (upprepa inte dig själv) din kod i CSS.
i grund och botten saknas CSS några bra funktioner som skulle hjälpa till att göra det till en lättare att använda och läsa. Sass lägger till variabler, häckande, Partials, Mixins, Extend/arv och operatörer. Några av dessa är saker som programmeringsspråk tenderar att ha., Om du inte vet vad några av dem är, så är det okej. Vi ska definiera var och en av dessa och visa dig hur de kan användas.
en Sass kan sammanställas till en CSS-filer gör det skriva många filer enkelt.
om du använder create react-appen har du tur eftersom bearbetningsdelen redan är omhändertagen för dig. Om inte kan du använda Grunt eller Gulp för att bearbeta dina Sass / SCSS-filer till CSS. Om du ännu inte befinner dig i en miljö som kommer att göra detta föreslår jag att du ställer upp det först. Denna artikel är att prata om funktionerna i Sass och hur man använder dem.,
Vad är skillnaden mellan Sass och SCSS. Tja, båda kan sammanställas till CSS. Den verkliga skillnaden är i syntax. SCSS använder mestadels samma syntax av CSS medan Sass tar bort lockiga hängslen och halvkolon. I båda kan du använda de extra funktioner som Sass ger.
följande visar syntaktiska skillnader.
om du använder något kodningsspråk vet du vad en variabel är. Så jag tänker inte gå för djupt med det här. I huvudsak Sass slutligen kan du definiera variabler så att om du väljer att ändra säga en färg du inte behöver ändra det 1000 gånger., Du kan bara ändra din primära färgvariabel på ett ställe och du är bra att gå
$primary-color: #333; body {
background-color: $primary-color;
}.text {
color: $primary-color;
}
kapsling
I CSS kan du inte bo. Låt oss ta en titt på dessa två väljare. Det är inget fruktansvärt fel med detta. Men vi upprepar koden.
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
Vi kan bo i Sass som så. Det ser mycket renare.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
Partials
Partials är Sass-eller Scss-filer som har ett understreck framför filnamnet. Exempelvis. ”_test.scss”. Vad gör den här?, Det betecknar är att den här filen inte ska omvandlas till CSS när tiden kommer. Dessa filer kommer att innehålla utdrag av CSS som sedan kan importeras av andra SCSS-filer.
detta är ett bra sätt att modularisera din CSS och hålla saker lättare att underhålla. Till exempel kanske du vill lagra variabler som kommer att användas i flera filer. Så här gör man.
Mixins
Mixins är intressanta eftersom de lägger till en kodande språkliknande funktion. Du kommer omedelbart att känna igen vad jag menar när du ser koden:
istället för att skriva ut ”rotera(30deg)” 3 gånger., Du kan skapa vad som i huvudsak känns som en funktion och slags handlingar som en. Du passerar i fastigheten till transformationen () mixin.
för att använda denna kod måste du använda nyckelordet ”@include”.
Mer info om du klickar här.
Extend/Inheritance& operatörer
Jag kommer att prata om dessa i del 2 eftersom de är lite mer involverade. Dessa är några av de mest användbara funktionerna i SCSS så följ och jag kommer att publicera den här bloggen nästa vecka!
följ mig på Twitter @thedrewprint och hitta mig på LinkedIn på Andrew Richards., Tack för att du läste!