Najlepšie tipy a nástroje pre Sass pre vývojárov

Rovnako ako spôsob, akým jQuery priniesol revolúciu do jazyka JavaScript, Spoločnosť Sass prevratovala vanilkový CSS. Väčšina vývojárov, ktorí sa učia spoločnosti Sass súhlasí s tým, že sa nikdy nechcú vrátiť. Mnohí tiež súhlasia, že najväčším problémom s novými vývojármi je spôsob používajú Sass, nie Sass sám.

Vyčistil som web a zostavil som tento článok najlepšie postupy pre písanie rozšíriteľného a opakovane použiteľného kódu Sass. Návrhy sú z môjho názoru a z dôveryhodných webových stránok, ako sú usmernenia spoločnosti Sass.

Určite nemusíte implementovať všetky tieto funkcie do vášho pracovného postupu. Ale stojí za to aspoň zabaviť tieto myšlienky a uvažovať o potenciálnych výhodách.

Organizácia súborov

Najlepším miestom na začatie vývoja Sass je organizácia súborov. Ak sa už nachádzate v modulárnom kóde, mali by ste pochopiť hodnotu dovozu a čiastkových položiek (viac o tom neskôr).

Ale teraz sa len pozrite na tento príklad štruktúry súborov z DoCSSa. Vytvoril som túto štruktúru súborov, ktorú môžete vidieť nižšie:

Toto je len návrh a je to jeden z mnohých spôsobov, ako môžete organizovať svoje súbory. Nájdete ďalšie metódy, ktoré používajú rôzne štruktúry priečinkov “globals” pre celú lokalitu SCSS a “stránky” pre SCSS špecifické pre stránku.

Poďme prejsť týmto navrhnutým štýlom organizácie, aby sme preskúmali účel každej zložky:

• / globals - obsahuje súbory Sass, ktoré sa aplikujú na celú lokalitu ako typografia, farby a mriežky
• / komponenty - obsahuje súbory Sass so štýlmi komponentov, ako sú tlačidlá, tabuľky alebo vstupné polia
• / profily - obsahuje súbory Sass určené pre konkrétne stránky alebo oblasti na stránke (môže sa lepšie kombinovať do priečinka / components / priečinka)
• / utils - obsahuje nástroje tretej strany, ako je Normalize, ktoré možno dynamicky aktualizovať pomocou nástrojov ako Bower.
• main.scss - primárny súbor Sass v koreňovom priečinku, ktorý importuje všetky ostatné.

Toto je len základný východiskový bod a je tu dostatok priestoru na rozšírenie s vlastnými nápadmi.

Ale bez ohľadu na to, ako sa rozhodnete usporiadať SCSS, je veľmi dôležité, aby ste vy mať nejakú organizáciu so samostatným súborom (alebo priečinkom) pre knižnice, ako je napríklad normalizácia, ktoré je potrebné aktualizovať, plus komponenty v častiach Sass pre váš projekt.

Súčasti Sass sú životne dôležité pre moderné najlepšie postupy. Tieto sú veľmi odporúčané tímom dizajnérov Zurb a mnohými ďalšími vývojármi profesionálnych frontendov.

Tu je citát z webovej stránky spoločnosti Sass s vysvetlením častíc:

“Môžete vytvoriť čiastkové súbory Sass, ktoré obsahujú malé fragmenty CSS, ktoré môžete zahrnúť do iných súborov Sass. Je to skvelý spôsob modularizujte CSS a pomáhajte udržiavať veci jednoduchšie. Čiastočný je jednoducho súbor Sass s názvom vedúcim podčiarkovníkom. Mohli by ste to niečo nazvať _partial.scss. Podčiarkovník umožňuje spoločnosti Sass vedieť, že súbor je iba čiastočný súbor a nemal by byť generovaný do súboru CSS. Sass čiastočky sú používané s @import smernice.”

Pozrite sa aj na tieto ďalšie príspevky týkajúce sa štruktúry súborov Sass:

• Ako som Štruktúru Moja Sass Projekty
• Estetické Sass: Organizácia architektúry a štýlu
• Adresár štruktúry, ktoré vám pomôžu udržiavať váš kód

Importné stratégie

Nestačí sa povedať o hodnote importu Sass a čiastočných. Organizácia kódu je kľúčom k získaniu štruktúry importu a pracovného postupu, ktorý práve funguje.

Najlepšie miesto na začiatku je globálny list obsahujúci importy, premenné a kombinácie. Mnoho vývojárov uprednostňuje oddeľovanie premenných a mixov, ale to sa týka sémantiky.

Majte na pamäti, že zmesi sú spôsob importu, alebo skôr zdvojenie kódu Sass. Sú neuveriteľne silné, ale nemajú sa s nimi používať “statický” code. Majte na pamäti, že existuje rozdiel medzi mixins, extends a zástupné symboly, ktoré sa používajú pri vývoji Sass.

Mixiny sa najlepšie používajú s dynamickými hodnotami prechádzajúcimi do mixu pre kódové zmeny. Pozrite sa napríklad na tento mix Sass, ktorý vytvára gradient pozadia medzi dvoma farbami.

@mixin linearGradient (dolná hranica, $ dolná) background: $ top; / * Staré prehliadače * / background: -moz-linear-gradient (vrchol, dolný 0%, dolný 100%); / * FF3.6 + * / pozadie: -webkit-gradient (lineárny, ľavý horný, ľavý spodný, farebný stop (0%, vrchný), farebný stop (100%, dolný); / * Chrome, Safari4 + * / background: -webkit-lineárny gradient (top, dolný 0%, dolný 100%); / * Chrome10 +, Safari5.1 + * / background: -o-lineárny gradient (vrchol, dolný 0%, dolný 100%); / * Opera 11.10+ * / background: -ms-lineárny gradient (vrchol, dolný 0%, dolný 100%); / * IE10 + * / pozadie: lineárny gradient (dole, dolný 0%, dolný 100%); / * W3C * / filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# 000000", GradientType = 0); / * IE6-9 * /

Mixin má dve hodnoty: hornú farbu a spodnú farbu. Mohli by ste napísať rôzne zmesi pre rôzne typy sklonov, ktoré obsahujú 3 alebo 4 + rôzne farby. To vám umožní importovať a klonovať mixin kód pri zmene parametrov pre vlastné možnosti.

Príklad od zodpovedného kódu vyzerá takto:

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

Vzťahuje sa na mixin Sass 'zástupný symbol, ktorý je primárne užitočný pri rozšírenej smernici. Je to pravdepodobne zložitejšie ako mixins, ale to môže byť spôsob, ako kombinovať prepínače bez prepísania prebytočného kódu.

Zatiaľ čo Sass má iba jednu metódu @import, zahrnula som mixins a zástupné symboly, aby sme preukázali flexibilitu kódu, ktorý môže byť napísaný v jednom súbore, ale je zahrnutý kdekoľvek.

Pri vytváraní štruktúry importu nezabudnite dodržiavať koncepty DRY kódovania (Neopakujte sa).

Pomenovanie konvencií

Všeobecné pravidlá pre konvencie pomenovania sa vzťahujú na premenné, funkcie a mixiny. Pri pomenovávaní čokoľvek v Sass je odporúčané použite všetky malé písmená s pomlčkami na oddelenie.

Syntax kódu Sass je v skutočnosti založený na pravidlách pravidiel CSS. Tu je niekoľko doporučených osvedčených postupov, ktoré treba mať na pamäti:

• dve (2) medzery, žiadne záložky
• ideálne 80 alebo viac znakov
• zmysluplné použitie medzery
• použite poznámky na vysvetlenie operácií CSS

Nie sú potrebné položky pre platný kód Sass. Ale tieto návrhy pochádzajú od profesionálnych vývojárov, ktorí zistili, že tieto pravidlá poskytujú najjednotnejšie skúsenosti s kódovaním.

Ale pokiaľ ide o pomenovanie konvencií, môžete skončiť s dvoma rôznymi štruktúrami: jeden pre názvy Sass a druhý pre názvy triedy CSS. Niektorí vývojári uprednostňujú návrhy BEM pred Sass. Ani jeden nie je viac, alebo menej, správny; jednoducho odlišné pri rôznych prevádzkových postupoch.

Problém je v tom, že BEM neprenáša dobre premenné alebo mixy Sass, pretože nemajú štruktúru bloku / elementu / modifikátora (BEM). Ja osobne radšej používam konvencie s názvom Sass, ale môžete vyskúšať čokoľvek od camelCase k vlastnej vnútornej syntaxe.

Pri organizácii vašich premenných a mixov sa odporúča rozdeliť ich podľa kategórií a potom ich zoradiť podľa abecedy. To zjednodušuje editáciu, pretože presne viete, kde nájdete niečo.

Ak napríklad chcete zmeniť farbu odkazu, otvoríte súbor premenných (možno _variables.scss) a nájdite sekciu pre farebné premenné. Potom nájdite prepojenie podľa mena (záhlavie, textový odkaz, atď.) A aktualizujte farbu. prostý!

Ak chcete získať predstavu o tom, ako môžete štruktúrovať obsah vašich súborov Sass, prečítajte si súbor s nastaveniami nadácie.

 // Nadácia pre nastavenia stránok // ----------------------------- // // Obsah: // // 1 Globálne // 2. Zlomky // 3. Mriežka // 4. Základná typografia // 5. Pomocník pre typografiu ... // 1. Globálny // --------- $ global-font-size: 100 %; $ globálna šírka: rem-calc (1200); $ global-lineheight: 1,5; // atď

Ďalšia prax pomenovania sa týka odozvu na odozvu. Pri pomenovávaní hraničných bodov Sass sa pokúste vyhnúť menám špecifickým pre zariadenie. Je lepšie písať mená ako malé, med, lg a xlg, pretože sú vzájomne voči sebe.

Je to lepšie pre vnútorné vzťahy medzi prestávkami, ale aj pre tímy, kde vývojári nemusia vedieť, ktoré zariadenia sa navzájom týkajú.

Pokiaľ ide o skutočné uvádzanie mien, odporúčame vám byť čo najkonkrétnejšia bez mimoriadne dlhých premenných. Mal by si prijať konvencie pomenovania v rámci celej lokality, ktoré sa ľahko zapamätajú pri kódovaní.

Zadajte konkrétne konvencie pomenovania pre všetky farby, okraje, stĺpce fontov a výšku línií. Nielenže môžu byť mená rýchlo spomenuté, ale to uľahčuje prácu pri písaní nových názvov premenných, ktoré musia zodpovedať existujúcej syntaxi.

Ale je tu jemná čiara medzi špecifickosťou a konvolúciou. Prax vám pomôže nájsť túto linku a písanie viacerých nezabudnuteľných mien uľahčuje kopírovanie kódu do iných projektov.

Hniezdenie a slučovanie

Tieto dve techniky Sass sú v akcii veľmi odlišné, ale obaja majú schopnosť zneužitia, ak sa nepoužíva dôkladne.

hniezdenia je proces pridaním selektorov vnorených spoločne pomocou odsadenia, čím sa vytvorí väčšia špecifickosť s menším počtom kódov. Sass má hniezdiaci sprievodca, ktorý ilustruje príklady vkladania kódu do činnosti. Ale je ľahké sa uniesť hniezdením. Ak máte príliš veľkú váhu, môžete skončiť s kódom, ktorý vyzerá takto:

telo div.content div.container ... telo div.content div.container div.articles ... telo div.content div.container div.articles> div.post ... 

Príliš špecifické a takmer nemožné prepísať, tento typ kódu porazí účel kaskádových štýlov.

Pri skimming tejto príručky SitePoint nájdete tri zlaté pravidlá pre hniezdenie:

• Nikdy viac než 3 úrovne hlboké.
• Uistite sa, že výstup CSS je čistý a opakovane použiteľný.
• Použite hniezdenie, ak to má zmysel, nie ako predvolená možnosť.

Vývojár Josh Broton navrhuje hniezdenie v prípade potreby, odsadenie zvyšku ako všeobecné pravidlo syntaxe.

Odsadenie vašich selektorov nespôsobí žiadne kaskádové efekty CSS. Ale budete mať jednoduchší čas skrývať váš súbor Sass určenie, ktoré triedy vzájomne súvisia.

Loops môže tiež ak sa nepoužije správne. Tri slučky Sass sú @for, @while, a @each. Nepôjdem do podrobností o tom, ako všetci pracujú, ale ak máte záujem pozrieť si tento príspevok.

Namiesto toho by som rád kryl účel pre použitie slučiek a ako fungujú v spoločnosti Sass. Mali by sa použiť na šetrenie časového kódu, ktorý možno automatizovať. Napríklad tu je útržok kódu z príspevku Clubmate, ktorý zobrazuje kód Sass nasledovaný výstupom:

/ * Sass kód * / @ pre $ i od 1 do 8 $ šírka: percent (1 / $ i) .col - # $ i šírka: $ šírka;  / * výstup * / .col-1 šírka: 100%; .col-2 šírka: 50%; .col-3 šírka: 33,333%;  .col-5 šírka: 20%; .col-6 šírka: 16,666%; .col-7 šírka: 14,285%; .col-8 šírka: 12,5%;

Tieto triedy stĺpcov je možné použiť v spojení s mriežkovým systémom. Môžete dokonca pridať ďalšie stĺpce alebo odstrániť niektoré len úpravou kódu slučky.

Loops mal nie slúži na duplikovanie selektorov alebo vlastností selektora; to je to, čo sú mixins.

Taktiež pri slučke existuje niečo, čo sa nazýva Sass mapy, ktoré ukladajú kľúč: hodnota párov dát. Pokročilí používatelia by mali tieto možnosti využiť vždy, keď je to možné.

Ale pravidelné slučky Sass sú jednoduché a efektívne pri poskytovaní kódu bez opakovania. Najlepším dôvodom na použitie slučiek je Vlastnosti CSS, ktoré menia výstup dát.

Tu je dobrý spôsob, ako skontrolovať, či je vaša slučka užitočná: opýtajte sa sami seba ak existuje iný spôsob, ako vygenerovať CSS, ktorý potrebujete, s menej riadkami kódu. Ak nie je syntax slučky pravdepodobne skvelý nápad.

Ak ste niekedy zmätení alebo chcete spätnú väzbu o hniezdiacich alebo Sass slučkách, mali by ste položiť otázku buď v / r / sass / alebo / r / css /, v aktívnych komunitách Reddit s veľmi dobre informovanými vývojármi Sass.

modularizácia

Praktické písanie modulárneho Sass je absolútnou nevyhnutnosťou pre väčšinu projektov (každý projekt by som argumentoval). Modularizácia je proces rozdeliť projekt na menšie moduly. To sa dá dosiahnuť použitím Sass partials.

Myšlienkou modulárneho Sass je napísať jednotlivé SCSS súbory so špecifickým cieľom zameraným na globálny obsah (typografia, mriežky) alebo elementy stránky (karty, formuláre).

Definícia modulu Sass je celkom jasná a predstavuje veľmi konkrétny návrh: import modulu by nikdy nemal vygenerovať kód.

Myšlienka povinného výstupu pre všetky moduly by bola nočná mora pre optimalizáciu. Namiesto toho by ste mali vytvoriť moduly jednotlivo a volajte len tie, ktoré potrebujete. Moduly sa dajú definovať pomocou mixov alebo funkcií, ale je možné vytvoriť aj moduly obsahujúce selektory.

Avšak článok Sass Way naznačuje napísanie všetkých selektorov ako mixins a len volanie podľa potreby. Či ste to prijali alebo nie, je nakoniec vašou voľbou. Myslím, že to závisí od veľkosti projektu a vášho pohodlia pri manipulácii s mixins.

Citoval John Long z jeho príspevku na The Sass Way:

“Moduly sa pre mňa stali základnými jednotkami alebo stavebnými blokmi projektov Sass.”

Ak naozaj hľadáte rutinu Sass, odporúčam, aby ste boli úplne modulárni. Pokúste sa vytvoriť takmer všetko ako modulárnu časť, ktorá sa začlení do primárneho súboru CSS. Spočiatku tento postup môže vyzerať skľučujúco, ale má zmysel v širšom rozsahu - hlavne pri veľkých projektoch.

Okrem toho je oveľa jednoduchšie kopírovať moduly z jedného projektu do druhého, keď sú umiestnené v samostatných súboroch. flexibilita a opakovane použiteľný kód sú základnými kameňmi modulárneho vývoja.

Ak sa chcete dozvedieť viac o moduloch Sass a modulačných technikách, pozrite si tieto príspevky:

• Moduly CSS: Vitajte do budúcnosti
• Klady a zápory modulárneho Sass
• Modulárna organizácia CSS s SMACSS a SASS

Nájdite si dokonalý pracovný postup

Každý tím a individuálny vývojár majú svoje vlastné postupy, ktoré fungujú najlepšie. Mali by ste prijímať postupy, ktoré najlepšie pracujú pre vás osobne, alebo sa rozhodnete prijať tie, ktoré najlepšie pracujú pre váš tím profesionálne.

Tiež zvážte použitie Gulp alebo Grunt pre automatizáciu projektu a zmenšovanie kódu. Tým sa ušetrí veľa manuálnych nástrojov a nástroje automatizácie sú teraz nepochybne súčasťou najlepších postupov pre moderný rozvoj frontend.

Presuňte sa do knižníc s otvoreným zdrojom, ako je SCSS nadácie na GitHub, aby ste sa dozvedeli viac o osvedčených postupoch, ktoré používajú iné knižnice.

Práca s osvedčenými postupmi spočíva v skutočnosti, že väčšinu práce skutočne vylepšujú, ale existuje veľa alternatív. Skúste veci a uvidíte, ako sa cítia. Vždy sa učíte, aby sa vaše najlepšie postupy mohli v priebehu piatich rokov rýchlo zmeniť.

Jeden posledný návrh, ktorý mám pre celý proces Sass, je prijímať rozhodnutia s jasnou mysľou. Napíšte kód, ktorý uľahčuje prácu. Nepreťažujte projekt, ak existuje jednoduchší spôsob, ako to urobiť.

Sass je určený na zvýšenie skúseností s rozvojom CSS pracovať s jasnosťou a osvedčenými postupmi aby ste získali čo najlepšie skúsenosti.

Zabaliť

Preťaženie v pracovnom procese spoločnosti Sass môže byť opravené štýly kódovania ladenia a dodržiavaním osvedčených postupov. Naznačil som niekoľko návrhov v tomto príspevku z blogov Sass a profesionálnych vývojárov.

Najlepší spôsob, ako sa dozvedieť viac, je aplikovať tieto postupy na pracovný postup a uvidíte, čo funguje. Postupom času zistíte, že niektoré aktivity sú výhodnejšie než iné, v takom prípade by ste mali držte to, čo funguje, a nechajte to, čo nie.

Pozrite sa na tieto odkazy a vyhľadajte ďalšie tipy a osvedčené postupy pre vývoj Sass:

• Pokyny Sass
• Vízia pre našu Sass
• 8 tipov, ktoré vám pomôžu získať to najlepšie z Sass
• Rozšírenie v Sass bez vytvorenia Mess
• Sass Best Practices - Hniezdenie viac ako 3 úrovne hlboké