Ako začať so Sassom

Sass je mocný nástroj, ktorý do CSS prináša mnoho funkcií z iných programovacích jazykov - ako sú funkcie, premenné a slučky - a rovnako prináša svoje vlastné intuitívne funkcie, ako sú mixíny, vnorenie a časti, aby sme vymenovali aspoň niektoré.

ako skryť perspektívnu mriežku v ilustrátore -

V tomto tutoriáli budeme vytvárať sociálne ikony pomocou Sassových slučiek, mixínov a funkcií. Budeme tiež využívať silné vnorenie dostupné v Sass.



V systéme Sass vytvoríme zoznam, ktorý vygeneruje naše sociálne ikony. Bude pozostávať najskôr z názvu triedy, odkazu na písmo a farby - a neskôr z popisu nástroja.



A pomocou mixinov vytvoríme opakovane použiteľné mediálne dotazy a vytvoríme funkciu na premenu pixlovej hodnoty na em. Za týmto účelom tiež vytvoríme premennú pre našu základnú veľkosť písma.

Existuje niekoľko spôsobov, ako nainštalovať a používať Sass v závislosti od vášho systému a vašich potrieb zostavovania nástrojov - ďalšie informácie nájdete tu - použijeme však CodePen na kompiláciu nášho Sass do CSS, aby bola situácia čo najjednoduchšia.



Aby ste skutočne využili silu Sass a nedostali sa do neporiadku špecifickosti a zložitosti, je potrebné dôkladné pochopenie CSS. Špeciálna príchuť Sass, ktorú budeme používať, je SCSS (Sassy CSS), čo znamená, že v našom kóde Sass budeme stále používať zložené zátvorky {}.

Získajte súbory výučby

Ak si chcete stiahnuť ukážkové súbory tohto tutoriálu, choďte na FileSilo , vedľa príručky vyberte Free Stuff and Free Content. Poznámka: Prvýkrát sa používatelia budú musieť zaregistrovať, aby mohli používať FileSilo.



01. Nastavte si svoj CodePen CSS

Správne nastavenie CSS CodePen je kľúčové

Správne nastavenie CSS CodePen je kľúčové

Prvá vec, ktorú musíme urobiť, je vytvorte nové pero a zmeňte niektoré z predvolených nastavení editora CSS v aplikácii CodePen. Zmeníme CSS Preprocesor na SCSS a zapneme Normalize a Autoprefixer.

02. Začnite písať nejaký kód

Teraz sme nastavili všetko, aby sme mohli začať písať nejaký kód. V editore HTML vytvoríme kontajner a niekoľko položiek vo vnútri, ktoré obsahujú odkaz a ikonu pre každú z našich ikon.

Názvy tu použité sa v našom zozname Sass použijú ako referencia v CSS. Pre názvy našich tried tiež použijeme konvenciu pomenovania BEM.

...

03. Nastaviť základné štýly

Prejdeme k editoru CSS, začneme zahrnutím úžasného písma, nastavením premennej pre našu základnú veľkosť písma a niektorými základnými štýlmi pre stránku.

@import url(http://srt.lt/w8yT8); // Variables $base-font-size: 16px; // Basic Styling body { font-size: $base-font-size; ... }

04. Vytvorte základnú funkciu

Ďalej vytvoríme základnú funkciu na premenu hodnoty pixelu na hodnotu em pomocou našej premennej '$ base-font-size'.

Funkcie v programe Sass sa vytvárajú pomocou znaku „@function“, za ktorým nasleduje názov funkcie a vstup použitý na vykonanie funkcie.

Potom vo vnútri deklarácie použijeme '@return' na výstup hodnoty pri použití funkcie. „# {}“ Obklopujúce výpočet sa používa pre interpolácia .

// Functions @function px-to-em($pixels) { @return #{$pixels/$base-font-size}em; }

05. Pripravte mixiny

Pokračujeme v našom nastavovaní a pomocou funkcie „px-to-em“ vytvoríme mixiny pre jednoduché mediálne dotazy typu „prvé do mobilu“, ktoré odovzdáme v hodnote px, aby sme vrátili hodnotu em.

Mixíny sa vytvárajú pomocou reťazca „@mixin“, za ktorým nasleduje názov mixínu. Potom vo vnútri deklarácie použijeme '@content' na výstup kódu, ktorý sme vložili do mixinu, keď ho voláme neskôr v našej kódovej základni.

@mixin viewport--large { @media only screen and (min-width: px-to-em(1680px)) { @content; } } @mixin viewport--medium { @media only screen and (min-width: px-to-em(1080px)) { @content; } }

06. Vytvorte zoznam Sass

Posledným krokom v našom nastavení je vytvorenie zoznamu. Zoznamy v Sass sa vytvárajú pomocou premennej; potom je presná syntax dosť voľná a prijíma širokú škálu spôsoby, ako to definovať .

Vo vnútri premennej definujeme pre každú ikonu názov triedy, hodnotu unicode a farbu a v zátvorkách ich oddeľujeme čiarkou.

ako maľovať tiene akrylom
$icon-list: ( vimeo “f27d' #1ab7ea, twitter “f099' #1da1f2, ... github “f113' #333, rss “f09e' #f26522 );

07. Zobrazte svoje ikony v rade

Aby sa naše sociálne ikony mohli zobrazovať v riadku, do každého z ich kontajnerov pridáme niekoľko jednoduchých CSS.

.social__item { display: inline-block; margin-right: 0.05em; }

08. Vytvorte zdieľaný štýl ikon

Aby sme minimalizovali množstvo vydávaných CSS, použijeme selektor CSS3, aby sme našli všetky triedy začínajúce sa na „ikonu“ a vytvorili pre ne zdieľaný štýl.

[class^='icon'] { font-family: 'FontAwesome'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

09. Upravte pozadie tlačidiel

Rovnakou metódou urobíme to isté pre tlačidlá definujúce naše hodnoty v položke „em“, čo nám neskôr umožní zmeniť ich veľkosť pomocou kontajnera.

[class^='social__icon'] { font-size: 1em; width: 2em; height: 2em; background-color: #333; color: white; text-decoration: none; border-radius: 100%; text-align: center; display: flex; align-items: center; justify-content: center; }

10. @ každá slučka pre naše ikony

Pomocou našej slučky sme vygenerovali ikony pre každú z našich sociálnych ikon

Pomocou našej slučky sme vygenerovali ikony pre každú z našich sociálnych ikon

Teraz máme všetky naše základné štýly, ktoré môžeme pomocou nášho zoznamu vygenerovať CSS špecifickým pre každú ikonu.

ako nainštalovať photoshop na mac

Na vytvorenie slučky v Sass používame '@each' a za nimi názvy každej hodnoty každej položky - '$ icon', '$ unicode' a '$ icon-background' - za ktorými nasleduje slovo 'in' a potom meno zoznamu.

Vo vnútri cyklu použijeme hodnotu „$ unicode“ na pseudoprvok „pred“ každej ikony, ktorú sme vytvorili v HTML, čo umožní zdieľanému štýlu, ktorý sme vytvorili predtým, postarať sa o všetky ďalšie potrebné štýly.

@each $icon, $unicode, $icon-background in $icon-list { .icon--#{$icon} { &::before { content: $unicode; } } }

11. @ každá slučka pre naše farby pozadia

Do našej sme pridali farby pozadia a ikony

Do našej slučky „@each“ sme pridali farby pozadia a ikony

Ikony teraz fungujú, ale stále máme záložnú farbu pozadia. Do nášho zoznamu pridáme ďalší kód, ktorý to napraví. Rovnakým spôsobom, ako je uvedené vyššie, sa zobrazí názov „ikona $“, ale tentokrát v triedach „social__icon“ a vo vnútri farba „$ icon-background“.

@each $icon, $unicode, $icon-background in $icon-list { ... .social__icon--#{$icon} { background-color: $icon-background; } }

12. Použite mixíny

Pomocou našich mixinov sme

Pomocou našich kombinácií sme aktualizovali veľkosť písma kontajnera, aby sme zmenili veľkosť ikon v závislosti od šírky výrezu

Pomocou mixínov, ktoré sme vytvorili skôr, a pretože sme ikony štylizovali pomocou hodnôt „em“, môžeme na kontajner použiť veľkosť písma a zväčšiť ju pomocou nášho mixu dotazov na médiá pomocou „@include“ a názvu mixinu, za ktorým nasleduje kód, ktorý chceme zahrnúť do mediálneho dotazu.

.social__container { font-size: 1em; @include viewport--medium { font-size: 1.5em; } @include viewport--large { font-size: 2em; } }

13. Pridajte stavy interakcie a zabudované funkcie

Svojim tlačidlám môžeme pridať určitú interaktivitu zmenou farby pozadia, keď je tlačidlo v interakcii s myšou alebo klávesnicou.

Sass má niekoľko zabudované farebné funkcie čo nám umožňuje vziať farbu pozadia, ktorú sme nastavili v našom zozname, a zmiešať ju s čiernou, aby sa pri interakcii s tlačidlom stmavilo.

icon--#{$icon} { background-color: $icon-background; &:hover, &:focus, &:active { background-color: mix(black, $icon-background, 15%); } }

14. Prechod na farbu pozadia

Vlastnosť „transition“ môžeme tiež použiť v CSS na animáciu rozdielov medzi farbami pozadia. Mohli by sme použiť hodnotu „všetci“, ale to je jednak nákladné z hľadiska výkonu, jednak by nám to neumožnilo prechod rôznych hodnôt v rôznych časovaniach a časovacích funkciách.

[class^='social__icon'] { ... transition: background-color 150ms ease-in-out ; }

15. Pridajte ďalšie prechodové efekty

Pridaním relatívneho umiestnenia k tlačidlám a najlepšej hodnoty a pridaním vrchu k našej vlastnosti „transition“ môžeme pripraviť prvky na ďalšiu interakciu.

[class^='social__icon'] { position: relative; top: 0; ... transition: background-color 150ms ease-in-out, top 250ms linear ; }

16. Po interakcii posuňte tlačidlá nahor

Pre túto interakciu nie je potrebné nič konkrétne vytvárať, preto môžeme pridať kód do zdieľanej triedy. Aplikáciou negatívnej najvyššej hodnoty a odstránením obrysu máme ešte zreteľnejšiu vizuálnu narážku interakcie.

[class^='social__icon'] { ... &:hover, &:focus, &:active { outline: none; top: -0.25em; } }

17. Pridajte vrhaný tieň

Pomocou vlastností prechodu sme animovali každú interakciu s tlačidlami - posunuli sme ich nahor, stmavili pozadie a pridali vrhnutý tieň

ako používať nástroj na orezanie perspektívy
Pomocou vlastností prechodu sme animovali každú interakciu s tlačidlami - posunuli sme ich nahor, stmavili pozadie a pridali vrhnutý tieň

Rovnakou metódou môžeme tiež vytvoriť a animovať „tieňový box“ - pridať interakcii trochu väčšej hĺbky - zmeniť vertikálnu výšku tieňa súčasne s najvyššou hodnotou.

box-shadow: 0 0 0.25em -0.25em rgba(0,0,0,0.2); &:hover, &:focus, &:active { ... box-shadow: 0 0.5em 0.25em -0.25em rgba(0,0,0,0.3); }

18. Pridajte popisy nástrojov

Môžeme ľahko pridať popisy pomocou CSS, aby sme našim používateľom zvýšili prehľadnosť. Prvá vec, ktorú urobíme, je pridať hodnotu popisu do zoznamu. Nezabudnite ich napísať do úvodzoviek, aby ste v prípade potreby mohli povoliť použitie medzier.

$icon-list: ( vimeo “Vimeo' “f27d' #1ab7ea, twitter “Twitter' “f099' #1da1f2, ... github “GitHub' “f113' #333, rss “RSS' “f09e' #f26522, );

19. Upravte slučku @each

Z dôvodu pridania do nášho zoznamu budeme musieť upraviť našu slučku „@each“ tak, aby obsahovala hodnotu popisu („$ name“). Tento názov potom môžeme vygenerovať ako obsah prvku „pred pseudo“ na našich tlačidlách.

@each $icon, $name, $unicode, $icon-background in $icon-list { ... .social__icon--#{$icon} { ... &::before { content: '#{$name}'; } } }

20. Štýl pseudoprvku pred

My

Do popisov nástrojov sme pridali niekoľko základných štýlov a opäť sme pridali prechody, aby sme ich animovali do polohy

Teraz máme na obrazovke zobrazený názov každého prvku, ktorý potrebujeme pre štýl prvku, pridanie farby pozadia, výplne a ďalších štýlových prvkov - rovnako ako umiestnenie prvku a jeho príprava na prechody a úprava nepriehľadnosti a najvyšších hodnôt pri interakcii. .

&::before { ... top: -3.5em; opacity: 0; transition: top 250ms linear, opacity 150ms linear 150ms; } &:hover, ... { ... &::before { opacity: 1; top: -2.5em; } }

21. Upravte štýl pseudoprvku

Použijeme Trojuholníky CSS aby sme vytvorili spodok našich popisov - opäť umiestnením prvku pripraveného na prechody - prechodom krytia a najvyšších hodnôt v rôznych časoch.

Pridaním oneskorenia dostaneme animáciu pozostávajúcu z vyblednutia popisu a presunutia nadol na miesto.

&::after { ... top: -1.9em; opacity: 0; transition: top 250ms linear, opacity 150ms linear 150ms; } &:hover, ... { ... &::after { opacity: 1; top: -0.9em; } }

Kolekciu návodov CodePen nájdete tu .

Tento článok sa pôvodne objavil v časopise Web Designer 264. Kúpite ho tu .

Čítaj viac: