Možná jste slyšeli o předběžných úpravách CSS a přemýšleli, co všechno je. Možná jste o tom slyšeli Sass nebo MÉNĚ .
Stručně řečeno, předběžné zpracování vašeho CSS umožňuje psát více stručných stylů, které jsou dobře formátovány a vyžadují méně opakujících se technik běžně nalezených při psaní kódu CSS. Výsledkem je dynamičtější styling a dostatek času při vytváření webových stránek nebo aplikací.
Pokud již napíšete CSS, můžete se snadno naučit předběžně zpracovat váš CSS. Jakmile pochopíte rozsah Sass, budete se divit, proč jste se dříve nezměnili.
Sass vypadá podobně jako CSS, ale má své zjevné rozdíly, jakmile se ponoříte dovnitř. Existují dva způsoby psaní Sass a je to nakonec na vás, jaký styl si přejete. V mých projektech používám odsazený a zarovnaný styl (.scss), protože se mi líbí skutečně vizualizovat, kde končí blok a začíná, když se hodně kódu vnoří. Jakmile je kód Sass zpracován, automaticky kompiluje s tradičním CSS pomocí předběžného zpracování.
Existuje mnoho aplikací, které umožňují předběžnou kompilaci vašeho Sass být bezproblémové a naprosto snadné. Chcete-li nainstalovat, můžete použít příkazový řádek tak dlouho, dokud máte v počítači nainstalován Ruby. Pokud se vám nelíbí příkazový řádek, existují další možnosti (více na tomto níže) a pokud je to nad vaší hlavou, navštivte Sass-lang.com, kde se dozvíte, jak to udělat v jednoduchém detailním formátu. Nakonec, pomocí libovolné metody, ať už je to příkazový řádek nebo aplikace, instalace Sass bude sledovat vaše změny a bude automaticky kompilovat dolů na tradiční CSS pro vás.
Velmi doporučuji používat aplikace jako například Codekit , LiveReload , nebo Směs které vám pomohou nastavit projekt Sass na počítači Mac od začátku nebo jste uživatel Windows, který doporučuji PrePros . Codekit, můj výběr preprocesoru, mi pomáhá předběžným zpracováním mého Sass, stejně jako validací a zmenšováním kódu, aby vaše webové stránky mohly běžet rychle a efektivně. (Schopnost vytvářet Kompas nebo Bourbon založené projekty v rámci programu Codekit jsou také úžasnou vlastností, ale jsou mimo rozsah tohoto článku.) Jakmile se s Sassem dostanete pohodlněji, nezapomeňte se podívat na to, jak používat Compass a Bourbon ve vašich projektech Sass.
Sass znamená syntakticky úžasné styly a byl vytvořen Hampton Catlin . Sass představuje nové koncepty jako proměnné, mixiny a vnoření do kódu CSS, který už víte a milujete. Tyto koncepty nakonec dělají vaše CSS úžasné, jednodušší psát a dynamičtěji. Všechny tyto funkce kombinují a urychlují pracovní postupy každého návrháře nebo vývojáře.
To, co obyčejně zaměňuje lidi, je alternativní způsob psaní Sass. Uvidíte další návody nebo vysvětlení Sassu pomocí souboru .SCSS nebo příponu .Sass pro jejich soubory Sass. To je zřejmé, protože existují dva způsoby psaní kódu, které produkují stejný výstup. Nejčastějším, co jsem viděl, a metoda, kterou v současné době používám, je vertikální verze označená jako .SCSS. Další metodou je přípona ".Sass", která se spíše opírá o spárování než o bodové prvky a závisí na bílém prostoru. S touto syntaxou není třeba žádné polokonky nebo závorky, jak vidíte v CSS a syntaxi .SCSS.
Podívejte se na níže uvedený příklad.
#container {width:960px;margin:0 auto;}#container p {color: black;}/* Same as CSS but has variables and nesting. */$black: #000000;#container {width:960px;margin:0 auto;p {color :$black;}}/* Same as SCSS without semicolons, brackets, and more dependent on indentation. */$black: #000000#containerwidth:960pxmargin: 0 autopcolor:$blackDobře, teď se asi ptáte, jak získat Sass nastavení pro vlastní projekty. Tento proces je velmi snadný, zvláště pokud používáte Codekit nebo podobnou aplikaci, která vám pomůže.
Typická struktura souborů projektu Sass vypadá jako níže uvedený obrys. To může vypadat skličující, ale slibuji, že se váš pracovní postup zlepší, jakmile obtočíte hlavu kolem toho, jak věci pracují společně. Nakonec se všechny vaše soubory Sass zkompilují do jednoho souboru CSS, který bude součástí vašeho pracovního dokumentu, ať už je to HTML, PHP atd ...
stylesheets/||-- modules/ # Common modules| |-- _all.scss # Global level styles| |-- _utility.scss # Basic utility styles| |-- _colors.scss # Global Colors| ...||-- partials/ # Partials - use these to target specific styles and @import on _base.scss| |-- _base.scss # imports for all mixins + global project variables| |-- _buttons.scss # buttons| |-- _figures.scss # figures| |-- _grids.scss # grids| |-- _typography.scss # typography| |-- _reset.scss # reset| ...||-- vendor/ # CSS or Sass from other projects| |-- _colorpicker.scss| |-- _jquery.ui.core.scss| ...||-- main.scss # primary Sass file - where your main Sass code will likely be.Jak nastavíte svou strukturu v konečném důsledku závisí na vás. Začněte se základní strukturou a jemným laděním podle svých potřeb a pracovních postupů.
Sass rozšiřuje pravidlo CSS @import a umožňuje importovat soubory Sass a SCSS. Všechny importované soubory jsou sloučeny do jediného výstupního souboru CSS. Navíc všechny proměnné nebo mixiny definované v importovaných souborech přenášejí do hlavního souboru, což znamená, že můžete prakticky míchat a shodovat libovolný soubor a být jisti, že všechny vaše styly zůstanou na globální úrovni.
@import převezme název souboru, který chcete importovat. Jako poslední instance budou importovány soubory Sass nebo SCSS pomocí názvu souboru podle vašeho výběru. Pokud není k dispozici žádné rozšíření, Sass se pokusí najít soubor s tímto názvem a příponou .scss nebo .Sass a importovat jej.
Pokud máte typické nastavení projektu Sass, zjistíte v rámci základního souboru některá pravidla @import. To jednoduše umožňuje mít několik souborů, které se po kompilaci efektivně synchronizují, například:
@import "main.scss";nebo:
@import "main";@PartialsPokud máte soubor SCSS nebo Sass, který chcete importovat, ale nekompilovat do CSS, můžete přidat podtržítko na začátek názvu souboru, který je jinak známý jako Částečný. Při sestavování kódu bude Sass ignorovat částečné při zpracování do CSS. Můžete například mít soubor _buttons.scss, žádný soubor _buttons.css by byl vytvořen a můžete @importovat "tlačítka";
Doporučená praxe je vytvořit adresář partials a umístit všechny jeho dílčí soubory Sass uvnitř. Tímto způsobem zajistíte, že nebudete mít žádné duplicitní názvy souborů, které Sass nepovolí, například dílčí _buttons.scss a soubory buttons.scss nemohou existovat ve stejném adresáři. Použití partiálů je skvělý způsob, jak zůstat organizováni na globální úrovni. Dokud @importujete soubor, Sass, který píšete, je použitelný po celý projekt. Typicky uvnitř částek vytvářím mixiny nebo proměnné, které se používají v průběhu celého projektu. Jmenuji je na základě jejich obsahu a prvků, které stylují.
Proměnné v CSS jsou průlomem v moderním vývoji webových stránek. Pomocí funkce Sass můžete vytvářet proměnné pro věci, jako jsou písma, barvy, velikosti, okraje, polstrování atd. Seznam je nekonečný. Pokud píšete JavaScript nebo PHP, koncept je poměrně podobný z hlediska definování proměnných a konvencí.
Tak proč používat proměnné? Jednoduché proměnné umožňují použít element více než jednou, podobný třídě v jazyce HTML nebo proměnné v jazyce JavaScript. Řekněme například, že definujete více divů s konkrétní barvou pozadí. Můžete použít proměnnou, která je snazší zapamatovat místo tradičního hexadecimálního kódu nebo výpočtu RGB. Vytvoření proměnné s názvem, který je snadno zapamatovatelný, umožňuje méně kopírování a vkládání a produktivnější pracovní postup. Stejný koncept platí vždy, když lze implementovat proměnnou a Sass, která je prakticky kdekoliv, například tento .scss:
#container {/* Here we define our variables */$basetextsize: 12px;$container-space: 10px;$red: #C0392B;/* Variables are applied */font-size: $basetextsize;padding: $container-space;color : $red;}bude mít za následek tento soubor .css:
#container {font-size: 12px;padding: 10px;color: #C0392B;}Chladná část o proměnných je, že jsou extrémně podobné těm, které se používají v skriptovacích jazycích. Proměnné uvnitř Sass mohou být použity uvnitř obou operací a funkcí. Standardní matematické operace (+, -, *, / a%) jsou podporovány pro čísla. Pro barvy jsou funkce Sass zabudovány do funkcí, které mají za cíl lehkost, odstín, sytost a další.
Díky této funkčnosti je váš kód dynamičtější než kdy předtím. Například Pokud chcete změnit celkovou barvu odkazu na vašem webu, můžete jednoduše změnit proměnnou, rekompilovat a vaše stránky se dynamicky aktualizují v celém textu. Podívejte se na další příklad níže pro opakovaně použitelný navigační seznam, tento .scss:
nav{$nav-width: 900px;$nav-links: 5;$nav-color: #ce4dd6;width: $nav-width;li{float: left;width: $nav-width/$nav-links - 10px;background-color:lighten($nav-color, 20%);&:hover{background-color:lighten ($nav-color, 10%);} }} bude to mít za následek .css:
nav {width: 900px;}nav li {float:left;width: 170px;background-color: #E5A0E9;}nav li:hover {background-color: #D976E0;}Hnízdění je obrovský důvod, proč miluji Sassa. Napíšete méně řádků kódu a celý kód je snadno čitelný díky vnořeným formátům. (Stejný koncept hnízdění se nachází také v LESS.)
Existují dva typy hnízdění:
Vestavěný selektor v Sass je podobný tomu, jak byste hnídali HTML:
Main Content
Sidebar Content
Verze hnízdění Sass:
#container {.main {width:600px;h1 {color: $red;}}.sidebar {width: 300px;h3 {margin: 0;}}}by vedlo k následujícímu CSS:
#container .main {width: 960px;}#container .main h1 {color: #C0392B;}#container .sidebar {width: 300px;}#container .sidebar h3 {margin: 0;}Druhým typem hnízdění je hnízdění majetku. Můžete vložit vlastnosti se stejnou předponou pro lepší cílení na prvky, což vede k méně řádkům kódu, například:
#container {.main {font:weight: bold;size: 12px;.intro {font:size: 20px;}}}by vedlo k tomuto CSS:
#container .main {font-weight:bold;font-size: 12px;}#container .main .intro {font-size:20px;}Ze všech funkcí Sass Mixins musí být nejmocnější. Mixiny jsou podobné proměnné, ale na steroidy. Můžete definovat úplný styl prvku a znovu použít tyto styly v rámci celého projektu.
Mixiny jsou definovány pomocí direktivy @mixin , ve které je vytvořen blok stylu, který jste vytvořili předtím, a použijete ho na zvolený přepínač pomocí direktivy @include . Níže je společný vzor CSS, který se používá pro vytváření vodorovného navigačního menu. Místo psaní stejného kódu pro každou instanci navigace stačí použít mixin a později jej zahrnout tam, kde je to nutné. Tento koncept lze provést za vše, co používáte znovu a znovu, jako jsou tlačítka, typografie, přechody atd.
/* Here we define the styles */@mixin navigate {list-style-type:none;padding:0;margin:0;overflow:hidden;> li {display:block;float:left;&:last-child{margin-right:0px;}}}A zde uvádíme mixin s jedním řádkem kódu:
ul.navbar {@include navigate;}což vede k tomuto kompilovanému CSS:
ul.navbar {list-style-type: none;padding:0;margin:0;overflow: hidden;}ul.navbar li {display: block;float: left;}ul.navbar li:last-child {margin-right: 0px;}Můžete dokonce jít tak daleko, jak vytvářet přizpůsobitelné mixiny, které používají argumenty k dynamické aktualizaci. Kromě toho můžete zahrnout mixiny do jiných mixin nebo vytvořit funkce pomocí mixins a další. Tahle síla je naprosto obrovská.
Tam jsou některé populární předem definované mixin sbírky, ve kterých jsem se zmínil dříve nazvaný Compass a Bourbon. S jednoduchým @import ve vašem projektu můžete mít přístup k již generovaným mixinům běžně používaným po celém webu. Existuje tolik možností, že je těžké pokrýt vše, co je k dispozici, ale je určitě zábavné experimentovat a dostat své ruce špinavé vyvíjení vlastní animace nebo přechody s několika řádky kódu spíše než obrazovka plná. Mixiny dělají křížový vývoj prohlížeče vítr, pokud nemáte pocit, jako kdybyste zadali prefixy definované prohlížečem znovu a znovu ve vašem CSS.
Například zde vytvoříme mixin s argumenty umožňujícími přizpůsobení.
@mixin my-border($color, $width) {border: {color: $color;width: $width;style: $dashed;}}p { @include my-border (blue, lin); }což nám dává tento CSS, když je kompilován:
p {border-color: blue;border-width: lin;border-style: dashed;}Zatímco Sass má křivku učení, opravdu věřím, že jakmile pochopíte metody a syntaxi, nikdy se nebudete chtít vrátit zpět k psaní standardního CSS.
Sass je extrémně výkonný a tady jsem zde zakrýval jen základy. S tradičními CSS jsme se setkali s kopírováním a vkládáním nebo najít a nahradit úkoly, které stráví tolik času ve fázi vývoje vašeho projektu. Vyzkoušejte Sass a zjistěte, jak v budoucích projektech stavět efektivní workflow.
Používáte Sass nebo preferujete jiný preprocesor CSS? Máte oblíbenou mixin? Dejte nám vědět v komentářích.
Doporučený obrázek / miniaturu, používá obraz od nuly k hrdinu přes Shutterstock.