Pokud jste re čtení tohoto, že pravděpodobně znamená, že jste obeznámeni s CSS a slyšeli, SCSS nebo Sass, ale dosud přijata ponoru.,
No dobrá zpráva. Sass bude váš život mnohem lepší. Nakonec budete moci vysušit (neopakovat se) svůj kód v CSS.
v podstatě CSS chybí některé skvělé funkce, které by pomohly přeměnit jej na snadnější použití a čtení. Sass přidává proměnné, hnízdění, Partials, Mixins, rozšířit / dědičnost, a operátory. Některé z nich jsou věci, které programovací jazyky mají tendenci mít., Pokud nevíte, co jsou některé z nich, to je v pořádku. Budeme definovat každý z nich a ukázat vám, jak mohou být použity.
Sass může být zkompilován do souborů CSS, což usnadňuje psaní mnoha souborů.
Pokud používáte aplikaci create react, máte štěstí, protože o zpracovatelskou část je již postaráno. Pokud ne, můžete použít Grunt nebo doušek zpracovat vaše soubory Sass / SCSS do CSS. Pokud ještě nejste v prostředí, které to udělá, doporučuji to nejprve nastavit. Tento článek je mluvit o vlastnostech Sass a jak je používat.,
jaký je rozdíl mezi Sass a SCSS. Oba mohou být sestaveny do CSS. Skutečný rozdíl je v syntaxi. SCSS používá většinou stejnou syntaxi CSS, zatímco Sass odnáší kudrnaté rovnátka a polotloupy. V obou můžete použít další funkce, které Sass poskytuje.
následující ukazuje syntaktické rozdíly.
Pokud používáte jakýkoli kódovací jazyk, víte, co je proměnná. Takže s tím nepůjdu příliš do hloubky. V podstatě Sass konečně umožňuje definovat proměnné tak, že pokud se rozhodnete změnit říci barvu, nemusíte ji měnit 1000krát., Můžete pouze změnit primární barevnou proměnnou na jednom místě a je dobré jít
$primary-color: #333; body {
background-color: $primary-color;
}.text {
color: $primary-color;
}
vnoření
v CSS nemůžete hnízdit. Podívejme se na tyto dva selektory. Na tom není nic strašného špatného. Ale opakujeme kód.
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
můžeme hnízdit v Sass tak. Vypadá to mnohem čistěji.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
Partials
Partials jsou soubory Sass nebo Scss, které mají podtržítko v přední části názvu souboru. Příklad. „_test.scss“. Co to dělá?, Znamená to, že tento konkrétní soubor by neměl být změněn na CSS, až přijde čas. Tyto soubory budou obsahovat úryvky CSS, které pak mohou být importovány jinými SCSS soubory.
Jedná se o skvělý způsob, jak modulovat vaše CSS a udržovat věci snadněji udržovatelné. Například budete chtít uložit proměnné, které budou použity ve více souborech. To je způsob, jak to udělat.
Mixiny
Mixiny jsou zajímavé, protože přidávají funkci podobnou kódovacímu jazyku. Okamžitě poznáte, co mám na mysli, když uvidíte Kód:
Místo psaní“ otočit(30Deg) “ 3krát., Můžete vytvořit to, co se v podstatě cítí jako funkce a tak nějak se chová jako jeden. Předáte vlastnost transformovat () mixin.
Chcete-li použít tento kód, musíte použít klíčové slovo „@include“.
Více informací, pokud kliknete zde.
rozšířit / dědičnost & operátoři
budu o nich mluvit v části 2, protože jsou o něco více zapojeni. To jsou některé z nejužitečnějších funkcí v SCSS, takže prosím následujte a budu zveřejňovat tento blog příští týden!
prosím, následujte mě na Twitteru @ thedrewprint a najděte mě na LinkedIn na Andrew Richards., Díky za přečtení!