Sass Best Practices Tipy a nástroje pro vývojáře

Podobně jako jQuery revoluci vanilky JavaScript, Sass revolucionizoval vanilku CSS. Většina vývojářů, kteří se naučili Sass, souhlasí, že se nikdy nechtějí vrátit. Mnozí také souhlasí s tím, že největším problémem nových vývojářů je způsob oni používají Sass, ne Sass sám.

Prohledal jsem web a zkompiloval tento článek osvědčené postupy pro psaní rozšiřitelného a opakovaně použitelného kódu Sass. Návrhy jsou z mých vlastních názorů az důvěryhodných webových stránek, jako jsou Sass Guidelines.

Určitě nemusíte všechny tyto funkce implementovat do svého pracovního postupu. Ale stojí za to alespoň bavit tyto nápady a uvažovat o potenciálních výhodách.

Organizace souborů

Nejlepším místem, kde začít s vývojem Sassu, je organizace souborů. Pokud jste již v modulárním kódu, měli byste pochopit hodnotu importu a partials (více o nich později).

Ale prozatím se podívejte na tento příklad struktury souboru z DoCSSa. Znovu jsem vytvořil tuto strukturu souborů, kterou můžete vidět níže:

To je jen návrh a je to jeden z mnoha způsobů, jak můžete své soubory organizovat. Můžete najít jiné metody, které používají různé struktury složek “globály” pro lokální SCSS a “stránek” pro stránku specifickou pro SCSS.

Projdeme tímto navrhovaným stylem organizace a prozkoumáme účel každé složky:

• / globály - obsahuje soubory Sass, které jsou aplikovány na webu jako typografie, barvy a mřížky
• / komponenty - obsahuje soubory Sass se styly komponent, jako jsou tlačítka, tabulky nebo vstupní pole
• / sekce - obsahuje soubory Sass věnované konkrétním stránkám nebo oblastem na stránce (mohou být lépe kombinovány do složek / složek / složek)
• / utils - obsahuje nástroje třetích stran jako Normalize, které lze dynamicky aktualizovat pomocí nástrojů jako Bower.
• main.scss - primární soubor Sass v kořenové složce, která importuje všechny ostatní.

To je jen základní výchozí bod a je zde spousta místa pro rozšíření s vlastními nápady.

Ale bez ohledu na to, jak se rozhodnete uspořádat svůj systém SCSS, je důležité, abyste to udělali mít nějakou organizaci se samostatným souborem (nebo složkou) pro knihovny jako Normalize, které je třeba aktualizovat, a komponenty v partiích Sass pro váš projekt.

Partie Sass jsou životně důležité pro moderní osvědčené postupy. Ty jsou vysoce doporučeny týmem Zurb design a mnoho dalších profesionálních vývojářů frontend.

Zde je citace z webových stránek Sass, kde jsou vysvětleny jednotlivé části:

“Můžete vytvořit částečné soubory Sass, které obsahují malé úryvky CSS, které můžete zahrnout do jiných souborů Sass. To je skvělý způsob, jak modularizovat vaše CSS a udržet věci jednodušší. Částečný je prostě soubor Sass pojmenovaný s podtržítkem. Můžete to pojmenovat _partial.scss. Podtržítko umožňuje společnosti Sass vědět, že soubor je pouze částečný soubor a že by neměl být generován do souboru CSS. Sass partials se používají s @import směrnice.”

Podívejte se také na tyto další příspěvky týkající se struktury souborů Sass:

• Jak jsem strukturovat své Sass projekty
• Estetický Sass: architektura a styl organizace
• Struktury adresářů, které vám pomohou udržovat váš kód

Dovozní strategie

O hodnotě importu Sass a partials nelze říci dost. Organizace kódu je klíčem k získání struktury importu a pracovního postupu, který funguje.

Nejlepším místem, kde začít, je globální list obsahující importy, proměnné a dohromady. Mnozí vývojáři dávají přednost oddělením proměnných a mixinů, ale to je sémantika.

Mějte na paměti, že mixiny jsou způsob importu, nebo spíše duplikování kódu Sass. Jsou neuvěřitelně silné, ale neměly by se používat “statický” kód. Mějte na paměti, že existuje rozdíl mezi mixiny, rozšiřováním a zástupnými symboly, z nichž všechny mají své využití ve vývoji Sass.

Mixiny se nejlépe používají s dynamickými hodnotami předávanými do mixinu pro změny kódu. Například, podívejte se na tento Sass mixin, který vytváří gradient pozadí mezi dvěma barvami.

@mixin linearGradient ($ top, $ bottom) background: $ top; / * Staré prohlížeče * / pozadí: -moz-lineární gradient (top, $ top 0%, $ bottom 100%); / * FF3.6 + * / background: -webkit-gradient (lineární, levý horní, levý dolní, barevný stop (0%, $ top), barevný stop (100%, $ bottom)); / * Chrome, Safari4 + * / background: -webkit-lineární gradient (top, $ top 0%, $ bottom 100%); / * Chrome10 +, Safari5.1 + * / background: -o-lineární gradient (top, $ top 0%, $ bottom 100%); / * Opera 11.10+ * / background: -ms-lineární gradient (top, $ top 0%, $ bottom 100%); / * IE10 + * / background: lineární gradient (na dolní, $ top 0%, $ bottom 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# 000000", GradientType = 0); / * IE6-9 * /

Mixin má dvě hodnoty: horní barvu a spodní barvu. Mohli byste psát různé směsi pro různé typy přechodů, které zahrnují 3 nebo 4+ různé barvy. To umožňuje importovat a klonovat kód mixinu při změně parametrů pro vlastní možnosti.

Příklad z odpovědného kódu vypadá takto:

.tlačítko @include linearGradient (#cccccc, # 666666); 

V souvislosti s mixinem je zástupný symbol Sass, který je primárně užitečný pro direktivu extend. Je to sice složitější než mixiny, ale může to být cesta kombinovat selektory bez přepisu nadbytečného kódu.

Zatímco Sass má pouze jednu metodu @import, zahrnula jsem mixiny a zástupné symboly, abych ukázala flexibilitu kódu, který může být napsán v jednom souboru, ale obsažen kdekoli.

Při vytváření struktury importu nezapomeňte dodržovat koncepty kódování DRY (Don't Repeat Yourself).

Konvence pojmenování

Obecná pravidla pro konvence pojmenování platí pro proměnné, funkce a mixiny. Když pomenujete cokoliv v Sassu, doporučuje se to pro oddělení použijte všechna malá písmena s pomlčkami.

Syntaxe kódu Sass je ve skutečnosti založena na pravidlech pro pravidla CSS. Zde je několik doporučených postupů, které je třeba mít na paměti:

• dvě (2) mezery, žádné záložky
• v ideálním případě 80 znaků široké linky nebo méně
• smysluplné používání mezer
• použít komentáře k vysvětlení operací CSS

Toto neplatí pro platný kód Sass. Ale tyto návrhy pocházejí od profesionálních vývojářů, kteří zjistili, že tato pravidla poskytují nejjednotnější zkušenosti s kódováním.

Pokud však jde o konvence pojmenování, můžete skončit se dvěma různými strukturami: jedna pro jména Sass a druhá pro názvy tříd CSS. Někteří vývojáři preferují BEM přes návrhy Sass. Ani jeden není více či méně správný; odlišných s různými provozními postupy.

Problém je v tom, že BEM nepřenáší dobře Sassovy proměnné nebo mixiny, protože nemají strukturu bloků / elementů / modifikátorů (BEM). Já osobně raději používám Sass jmenné konvence, ale mohli byste zkusit cokoliv od camelCase k vlastní interní syntaxi.

Při organizování proměnných a mixů je doporučeno rozdělte je podle kategorií a poté je vypisujte v abecedním pořadí. Díky tomu je editace mnohem jednodušší, protože přesně víte, kde něco najít.

Chcete-li například změnit barvu odkazu, otevřete soubor proměnných (možná _variables.scss) a vyhledejte sekci pro barevné proměnné. Poté najděte odkaz podle názvu (odkaz záhlaví, textový odkaz atd.) A aktualizujte barvu. Jednoduchý!

Chcete-li získat představu o tom, jak byste mohli strukturovat obsah souborů Sass, podívejte se na soubor nastavení nadace.

 // Nadace pro nastavení stránek // ----------------------------- // // 1 Global // 2. Breakpoints // 3. The Grid // 4. Základní typografie // 5. Typografie Helpers… // 1. Global // --------- $ global-font-size: 100 %; $ global-width: rem-calc (1200); $ global-lineheight: 1,5; // atd

Další jmenovací praxe se týká citlivé zarážky. Při pojmenování zarážek Sass se snažte vyhnout názvům specifickým pro zařízení. Je lepší psát jména jako malé, med, lg a xlg, protože jsou relativní.

To je lepší pro vnitřní vztahy mezi zarážkami, ale také skvělé pro týmy, kde vývojáři nemusí vědět, která zařízení se navzájem týkají.

Pokud jde o to, aby se daly jména, doporučuje se, abyste to udělali být co nejkonkrétnější bez příliš dlouhých proměnných. Měl by jsi přijmout konvence, které jsou snadno zapamatovatelné při kódování.

Uveďte specifické konvence pojmenování pro vše, jako jsou barvy, okraje, svazky písem a výšky čar. Nejen, že se jména mohou rychle vzpomenout, ale také usnadňuje práci při psaní nových názvů proměnných, které musí odpovídat existující syntaxi.

Ale je tu jemnou linii mezi specificitou a konvolucí. Prax vám pomůže najít tuto linku, a psaní více památných jmen usnadňuje kopírování kódu do jiných projektů.

Vnoření A Opakování

Tyto dvě Sass techniky jsou velmi odlišné v akci, ale oba mají schopnost být zneužíván, pokud není používán ohleduplně.

Hnízdění je proces přidání selektorů vnořených dohromady přes odsazení pro vytvoření více specifičnosti s menším kódem. Sass má průvodce hnízděním, který ilustruje příklady vnoření kódu v akci. Ale je snadné se unést s hnízděním. Pokud jste nadšeni, můžete skončit s kódem, který vypadá takto:

tělo div.content div.container … tělo div.content div.container div.articles … tělo div.content div.container div.articles> div.post … 

Tento typ kódu je až příliš specifický a téměř nemožné přepsat, což je důvodem kaskádových stylů.

Skimming tohoto průvodce SitePoint najdete tři zlatá pravidla pro vnoření:

• Nikdy nejezděte více než 3 úrovně hluboko.
• Zajistěte, aby byl výstup CSS čistý a znovu použitelný.
• Vnoření použijte, když to dává smysl, ne jako výchozí možnost.

Vývojář Josh Broton navrhne vnoření v případě potřeby, zbytek odsadí jako obecné pravidlo syntaxe.

Odsazení voličů nezpůsobí žádné kaskádové efekty CSS. Ale budete mít jednodušší čas skimming váš Sass soubor pinpointing, které třídy se vztahují k sobě navzájem.

Smyčky mohou také pokud není správně aplikován. Tři smyčky Sass jsou @pro, @zatímco, a @každý. Nebudu jít do podrobností o tom, jak všichni pracují, ale pokud máte zájem, podívejte se na tento příspěvek.

Místo toho bych chtěl přikrýt použití smyček a jak fungují v Sassu. Ty by měly být použity k úspoře času psaní kódu, který lze automatizovat. Zde je například úryvek kódu z příspěvku Clubmate zobrazující nějaký kód Sass následovaný výstupem:

/ * Sass kód * / @ pro $ i od 1 do 8 $ width: procento (1 / $ i) .col - # $ i width: $ width;  / * output * / .col-1 width: 100%; .col-2 width: 50%; .col-3 width: 33.333%; .col-4 width: 25%;  .col-5 width: 20%; .col-6 width: 16.666%; .col-7 width: 14.285%; .col-8 width: 12.5%;

Tyto třídy sloupců lze použít ve spojení se systémem mřížky. Dokonce můžete přidat další sloupce nebo některé odstranit pouze úpravou kódu smyčky.

Smyčky by měl ne být použity k duplikaci selektorů nebo vlastností pro selektor; to je to, na co jsou mixiny.

Také při smyčkování existuje něco, co se nazývá Sass mapy, které ukládají páry klíčů: hodnota. Pokročilí uživatelé by měli tyto výhody využívat kdykoli je to možné.

Ale běžné Sass smyčky jsou jednoduché a efektivní při poskytování kódu bez opakování. Nejlepší důvod pro použití smyček je s Vlastnosti CSS, které mění výstup dat.

Zde je dobrý způsob, jak zjistit, zda je vaše smyčka užitečná: zeptejte se sami sebe pokud existuje jiný způsob, jak výstup CSS potřebujete, s méně řádky kódu. Pokud ne, pak smyčka syntaxe je pravděpodobně skvělý nápad.

Pokud jste někdy zmatení nebo chcete zpětnou vazbu o smyčkách vnoření nebo Sass, měli byste poslat otázku v aktivních komunitách Reddit / r / sass / nebo / r / css /, s velmi dobře informovanými vývojáři Sass.

Modularizace

Praxe psaní modulárního Sassu je pro většinu projektů naprosto nezbytná (argumentuji, každý projekt). Modularizace je proces rozdělení projektu na menší moduly. Toho lze dosáhnout pomocí Sass partials.

Myšlenkou modulárního systému Sass je psát jednotlivé soubory SCSS s konkrétním účelem cílení na globální obsah (typografie, mřížky) nebo prvky stránky (karty, formuláře).

Definice modulu Sass je zcela jasná a podává velmi specifický návrh: Při importu modulu by se nikdy nemělo vydávat kód.

Myšlenka povinného výstupu pro všechny moduly by byla pro optimalizaci noční můrou. Místo toho byste měli vytvořit moduly individuálně a zavolejte jen ty, které potřebujete. Moduly lze definovat pomocí mixinů nebo funkcí, ale je možné vytvořit moduly, které obsahují také voliče.

Nicméně článek Sass Way navrhuje zapsat všechny selektory jako mixiny a zavolat je jen podle potřeby. Ať už to přijmete nebo ne, je nakonec vaše volba. Myslím si, že záleží na velikosti projektu a pohodlí při manipulaci s mixiny.

Cituje Johna Longa z jeho postu na The Sass Way:

“Moduly se pro mě staly základními jednotkami nebo stavebními kameny mých projektů Sass.”

Pokud opravdu hledáte rutinu Sass, doporučuji plně modulární. Zkuste stavět téměř vše jako modulární dílčí část, která je součástí primárního souboru CSS. Zpočátku se tento pracovní postup může zdát skličující, ale má smysl v širším měřítku - zejména u velkých projektů.

Navíc je mnohem snazší kopírovat moduly z jednoho projektu do druhého, pokud jsou umístěny v samostatných souborech. Flexibilita a kód jsou základními pilíři modulárního vývoje.

Chcete-li se dozvědět více o modulech Sass a modularizačních technikách, podívejte se na tyto příspěvky:

• Moduly CSS: Vítejte v budoucnosti
• Klady a zápory Modulární Sass
• Modulární CSS organizace s SMACSS & SASS

Najděte si perfektní pracovní postup

Každý tým a individuální vývojář má své vlastní postupy, které fungují nejlépe. Měli byste přijmout postupy, které pro vás osobně fungují nejlépe, nebo se rozhodnout přijmout ty, které pro váš tým fungují nejlépe profesionálně.

Také zvážit použití Gulp nebo Grunt pro automatizaci projektu a zhuštění kódu. To ušetří spoustu manuální práce a automatizační nástroje jsou nyní nepochybně součástí osvědčených postupů pro moderní vývoj frontendu.

Skim přes open source knihovny, jako je nadace SCSS na GitHub, abyste se dozvěděli více o osvědčených postupech využívaných jinými knihovnami.

Na osvědčených postupech je to, že většinu času skutečně zlepšují vaši práci, ale existuje mnoho alternativ. Jen to zkuste a uvidíte, jak se cítí. Vždy se budete učit, aby se vaše osvědčené postupy mohly v průběhu 5 let rychle měnit.

Jeden poslední návrh, který mám pro celý proces Sassu je učinit rozhodnutí s jasnou představou. Napište kód, který vám usnadní práci. Nepřeplňujte projekt, pokud je to jednodušší způsob, jak to udělat.

Sass je určen k posílení CSS rozvojové zkušenosti, takže pracovat s jasností a osvědčenými postupy získat co nejlepší zkušenosti.

Zabalit

Přetížení v pracovním postupu Sass lze opravit úpravou stylů kódu a následnými osvědčenými postupy. Nastínil jsem několik návrhů v tomto příspěvku z blogů Sass a profesionálních vývojářů.

Nejlepším způsobem, jak se dozvědět více, je použít tyto postupy ve vašem pracovním postupu a vidět, co funguje. Postupem času zjistíte, že některé aktivity jsou výhodnější než jiné, v takovém případě byste měli udržujte vše, co funguje a co ne.

Podívejte se na tyto odkazy a vyhledejte další tipy a osvědčené postupy pro vývoj služby Sass:

• Sass Guidelines
• Vize pro naši Sass
• 8 tipů, které vám pomohou získat to nejlepší z Sass
• Rozšíření v Sassu bez vytvoření nepořádku
• Sass nejlepší praxe - hnízdit více než 3 úrovně hluboko