Jak začít s SASS

Sep 11, 2025
jak

Sass. Je to mocný nástroj, který přináší mnoho funkcí z jiných programovacích jazyků do CSS - jako jsou funkce, proměnné a smyčky - stejně jako přinášet své vlastní intuitivní funkce, jako jsou mixiny, hnízdění a částečné pojmenovat několik.

V tomto tutoriálu budeme vytvářet sociální ikony pomocí smyček SASS, mixinů a funkcí. Budeme také používat mocné hnízdění dostupné v SASS.

  • Co je sass?

Vytváříme seznam v SASS pro generování našich sociálních ikon, které budou sestávat z klasifikace třídy, odkazu na písmo a barvu - a později nástroj Tooltip.

A my budeme používat mixiny, abychom vytvořili opakovaně použitelné média dotazy a vytváření funkce pro otočení hodnoty pixelu do hodnoty EM. K tomu budeme také vytvářet proměnnou pro velikost základny.

Existuje celá řada způsobů, jak nainstalovat a používat SASS v závislosti na systému a vaše potřeby stavebních nástrojů - více informací naleznete tady - Budeme však používat kódepen, abychom zkompilovali naše Sass do CSS, aby se věci co nejjednodušší.

Chcete-li skutečně využít sílu Sass a nedostane se do nepořádku specificity a složitosti, je nutné pevné porozumění CSS. Konkrétní příchuť SASS budeme používat, je SCSS (Sassy CSS), což znamená, že budeme stále používat kudrnaté závorky {} v našem kódu SASS.

Získejte tutoriálové soubory

Chcete-li stáhnout příklad soubory pro tento kurz, přejděte Filesilo , Vyberte volné věci a volný obsah vedle tutoriálu. Poznámka: Nejprve se budou muset uživatelé zaregistrovat, aby používali souboryilo.

01. Nastavte své Codepen CSS

Getting your CodePen CSS set up correctly is key

Získání přístroje CSS SET UP UP

První věc, kterou budeme muset udělat, je Vytvořte nové pero a změnit některé výchozí nastavení pro Editor CSS v Codepen. Změneme předprocesor CSS na SCSS a zapnout normalizaci a autoprefixer.

02. Začněte psát nějaký kód

Nyní jsme všechno nastavili nahoru, můžeme začít psát nějaký kód. Uvnitř editoru HTML vytvoříme kontejner a řadu položek uvnitř obsahujícího odkaz a ikonu pro každou z našich ikon.

Názvy zde použité budou použity v našem Sass seznamu jako reference v CSS. Budeme také používat konvenci pojmenování bem pro naše názvy tříd. 

 & lt; divá třída = "social__container" & gt;
  & lt, divová třída = "social__item" & gt;
  & lt; cíl = "_ blank" href = "..."
  Třída = "Social__ICON - Twitter" & gt;
  Ikona třídy Třída = "- Twitter" & gt; & lt; / i & gt;
  & lt; / A & gt;
  & lt; / div & gt;
  ...
& lt; / div & gt;

03. Nastavte základní styly

Přesunutí do Editoru CSS začneme zahrnutím font-úžasné, nastavením proměnné pro naši základní písmo a některé základní styly pro stránku. 

 @import URL (http://srt.lt/w8yt8);
// proměnné
$ základní font-velikost: 16px;
// základní styling.
tělo {
  Velikost písma: $ základní font-velikost;
  ...
}

04. Vytvořte základní funkci

Dále vytvoříme základní funkci pro otočení hodnoty pixelu na hodnotu EM pomocí naší proměnné "$ base-font-velikost".

Funkce v SASS jsou vytvořeny pomocí "@function" následovaný název funkce a vstup slouží k provedení funkce.

Pak uvnitř prohlášení používáme "@return" pro výstup hodnoty při použití funkce. '# {}' Obklopující výpočet se používá pro interpolace . 

 // funkce
@funkce px-to-em ($ pixels) {
@Return # {$ pixels / $ základní font-size} em;
}

05. Proveďte mixiny

Pokračování na našem instalaci vytvoříme mixiny pro jednoduché mobilní-první mediální dotazy pomocí naší funkce "PX-to-EM", kterou přijmeme v hodnotě PX, abyste vrátili hodnotu EM.

Směšce jsou vytvořeny pomocí "@mixin" následovaný názvem pro mixinu. Pak uvnitř prohlášení používáme "@content" pro výstup kódu, který jsme vložili do mixinu při volání později v našem Codebase. 

 @mixin Viewport - velký {
  Pouze obrazovka @Media a
  (Min-šířka: px-to-em (1680px)) {
  @obsah;
}}
@mixin Viewport - střední {
  Pouze obrazovka @Media a
  (Min-šířka: px-to-em (1080px)) {
  @obsah;
}}

06. Nastavte seznam SASS

Posledním krokem v našem nastavení je vytvořit seznam. Seznamy v SASS jsou vytvořeny pomocí proměnné; Poté je přesná syntaxe docela volná, přijímá širokou škálu způsoby, jak to definovat .

Uvnitř proměnné definovat název třídy, hodnotu Unicode a barvu pro každou ikonu, odděluje je čárkou, uvnitř závorek. 

 $ Icon-Seznam: (
  vimeo "f27d" # 1Ab7ea,
  Twitter "F099" # 1DA1F2,
  ...
  github "f113" # 333,
  RSS "f09e" # f26522
);

07. Zobrazte své ikony v řadě

Aby naše sociální ikony zobrazili v řadě, přidáme některé jednoduché CSS k každému z jejich kontejnerů. 

 .Social__Item {
  Displej: inline-blok;
  Právo okraje: 0.05em;
}

08. Vytvořte styl sdílené ikony

Chcete-li minimalizovat množství výstupu CSS, které budeme používat volič CSS3, abyste našli všechny třídy začínající "ikonou" a vytvoří se sdílený styl pro ně. 

 [třída ^ = "ikona"] {
  Font-Family: "Fontawesome";
  mluvit: žádný;
  Font-Style: Normální;
  Hmotnost písma: normální;
  varianta písma: normální;
  Textová transformace: Žádný;
  Výška čáry: 1;
  -webkit-font-plahulňování: antialiased;
  -Moz-OSX-font-Plyning: Stupně šedi; }

09. Stáhnout obrázek pozadí

Pomocí stejné metody uděláme totéž pro tlačítka definující naše hodnoty v 'Em', což nám umožňuje později změnit velikost kontejneru. 

 [třída ^ = "Social__ICON"] {
  Velikost písma: 1em; Šířka: 2em; Výška: 2em;
  Barva pozadí: # 333;
  barva bílá;
  Textová dekorace: Žádný;
  okruh pohraničí: 100%;
  Text-ALIGN: CENTER;
  Displej: Flex;
  Zarovnat předměty: Centrum;
  ospravedlnit-obsah: centrum;
}

10. @Each smyčka pro naše ikony

We’ve used our loop to generate the icons for each of our social icons

Použili jsme naši smyčku pro generování ikon pro každou z našich sociálních ikon

Nyní máme všechny naše základní styly, které můžeme použít náš seznam pro generování CSS specifické pro každou ikonu.

Chcete-li vytvořit smyčku v Sassu používáme '@each' následované názvy pro každou hodnotu každé položky - '$ icon', '$ Unicode' a '$ Icon-Background' - následované slovem 'in' a pak jméno ze seznamu.

Uvnitř smyčky použijeme hodnotu '$ Unicode' hodnotu na 'před' pseudo prvek každé ikony, kterou jsme vytvořili v HTML, což umožňuje sdílenému stylu, který jsme vytvořili dříve, abyste se postarali o všechny ostatní potřebné styly. 

 @ Ikona $, $ Unicode, $ Icon-Background
v $ icon-list {
  .icon - # {$ icon} {
  & amp; :: před {
  Obsah: $ Unicode;
  }
  }
}

11. @each smyčka pro naše barvy pozadí

We’ve added the background colours as well as the icons to our '@each' loop

Přidali jsme barvy pozadí, stejně jako ikony na naši "@each" smyčka

Ikony jsou nyní v pořádku, ale stále máme záložní barvu pozadí. Do našeho seznamu přidáme další kód, který vám opraví. Pomocí stejné metody, jak je uvedeno výše, budeme vydávat název "$ Icon", ale tentokrát na třídách "Social__icon" a uvnitř, že "$ Icon-Background" barva ". 

 @ Ikona $, $ Unicode, $ Icon-Background
v $ icon-list {
  ...
  .Social__icon - # {$ icon} {
  Barva pozadí: $ Icon-Background;
  }
}

12. Použijte mixiny

Using our mixins we've updated the font size of the container to change the icons size depending on the viewport width

Pomocí našich mixinů jsme aktualizovali velikost písma kontejneru pro změnu velikosti ikon v závislosti na šířce výřezu

Použití směsí, které jsme vytvořili dříve, a protože jsme stylizovali ikony pomocí hodnot 'EM', můžeme použít velikost písma do kontejneru a zvýšit ji pomocí našeho média-dotazu míchání pomocí "@include" a název mixinu následovaným Kód Chceme zahrnout do mediálního dotazu. 

 .Social__container {
  Velikost písma: 1em;
  @include výhled - střední {
  Velikost písma: 1.5EM;
  }
  @include výhled - velký {
  Velikost písma: 2EM;
  }}

13. Přidat interakční stavy a vestavěné funkce

Můžeme přidat nějakou interaktivitu na naše knoflíky změnou barvy pozadí, když je tlačítko interagováno buď pomocí myši nebo klávesnice.

Sass má řadu Vestavěné barevné funkce Umožňuje nám vzít barvu pozadí, kterou jsme nastavili v našem seznamu a smíchejte ji s černou k temnému stisknutí tlačítka - při interakci. 

 Ikona - # {$ icon} {
  Barva pozadí: $ Icon-Background;
  & amp;
  & amp;: zaměření,
  & amp;: aktivní {
  barva pozadí:
  Mix (černá, $ Icon-Background, 15%);
  }}

14. Přechod Barva pozadí

Můžeme také využít vlastnost "Přechod" v CSS animovat rozdíly mezi barvami pozadí. Mohli bychom použít "veškerou" hodnotu, ale to je jak drahé, pokud jde o výkonnost, a neumožňujeme nám přechod různých hodnot v různých časování a časování. 

 [třída ^ = "Social__ICON"]{
  ...
  Přechod: barva pozadí
  150ms Snadno-in-out
  ;
}

15. Přidejte další přechodové efekty

Přidáním "relativního" umístění tlačítek a nejvyšší hodnotu a přidání "top" na náš "přechodový" nemůžeme připravit prvky pro další interakci. 

 [třída ^ = "Social__ICON"] {
  Pozice: Relativní;
  top: 0;
  ...
  Přechod: barva pozadí
   150ms Snadno-in-out,
    top 250ms lineární
  ; }

16. Přesuňte tlačítka na interakci

Pro tuto interakci není nutné nic konkrétního pro vytvoření proto můžeme přidat kód do sdílené třídy. Použitím negativní horní hodnoty a odstranění obrysu máme ještě jasnější vizuální tágo interakce. 

 [třída ^ = "Social__ICON"] {
  ...
  & amp;
  & amp;: zaměření,
  & amp;: aktivní {
  Obrys: žádný;
  Top: -0.25EM;
  }}

17. Přidejte klesající stín

Using transition properties we’ve animated any interaction with the buttons – moving them up, darkening the background and adding a drop shadow

Použití přechodových vlastností jsme oživili jakoukoliv interakci s tlačítky - pohybující se je nahoru, ztmavnutí pozadí a přidání klesajícího stínu

Můžeme také použít stejnou metodu vytvořit a animovat "box-stín" - přidání o něco více hloubky interakce - změna vertikální výšky stínu současně jako horní hodnotu. 

 Box-Shadow:
  0 0 0.25EM -0.25EM RGBA (0,0,0,0,0,2);
& amp;
& amp;: zaměření,
& amp;: aktivní {
  ...
  Box-Stín:
  0 0.5EM 0,25EM -0.25EM RGBA (0,0,0,0,3);
}

18. Přidejte tooltips.

Můžeme snadno přidat nástroje s CSS, abychom přidali další přehlednost pro naše uživatele. První věc, kterou provedeme, je přidat hodnotu Tooltip do seznamu. Ujistěte se, že je zapisuje do uvozovek, abyste mohli povolit použití mezer. 

 $ Icon-Seznam: (
  vimeo "vimeo" "f27d" # 1Ab7ea,
  Twitter "Twitter" "F099" # 1DA1F2,
  ...
  github "github" "f113" # 333,
  RSS "RSS" "F09E" # F26522,
);

19. Upravte @each Loop

Vzhledem k přídavku k našemu seznamu budeme muset upravit naši smyčku "@each", abyste zahrnuli hodnotu Tooltip ("$ jméno"). Pak můžeme řídit toto jméno jako obsah prvku 'před pseudo' na našich tlačítkách. 

 @ Ikona $, $ jméno, $ Unicode,
  $ Icon-Background v $ Icon-Seznam {
  ...
  .Social__icon - # {$ icon} {
  ...
  & amp; :: před {
  Obsah: '# {$ jméno};
  }
  }}

20. Styl před pseudo prvkem

We've added some basic styles to the tooltips again adding transitions to animate them into position

Přidali jsme některé základní styly k nástrojům znovu přidávat přechody na jejich animaci do polohy

Nyní máme jméno každého prvku zobrazeného na obrazovce, kterou potřebujeme, aby se element styl, přidal barvu pozadí, polstrování a další stylingové prvky - stejně jako umístění prvku a jejich zapnutí pro přechody a úpravy opacity a horní hodnoty při interakci . 

 & AMP; :: Před {...
  Top: -3.5EM;
  krytí: 0;
  přechod:
  top 250ms lineární, opacity 150ms lineární 150ms;
}
& amp;: vznášet se, ... {...
  & amp; :: před {
  Opacita: 1;
  Top: -2.5EM; }
}

21. Styl Po pseudo prvku

Budeme používat CSS trojúhelníky Chcete-li vytvořit spodní část našich nástrojů - opět umístění prvku, který je upraven pro přechody - přechodem opacity a horní hodnoty v různých časech.

Přidáním zpoždění dostaneme animaci sestávající z nástroje mizejí a pohybuje se na místě. 

 & AMP; :: Po {...
  top: -1.9em;
  krytí: 0;
  přechod:
  top 250ms lineární, opacity 150ms lineární 150ms;
}
& amp;: vznášet se, ... {...
  & amp; :: Po {
  Opacita: 1;
  Top: -0.9EM; }
}

Kolekce codepen výuky výuky lze nalézt tady .

Tento článek se původně objevil ve Web Designer Magazine Issue 264. Koupit to tady .

Přečtěte si více:

  • Co je sass?
  • 8 Codepen funkce, o kterých jste nevěděli
  • 5 tipů pro super-rychlé css

jak - Nejoblíbenější články

Jak nakreslit psa

jak Sep 11, 2025

Dnešní tutoriál vám ukáže, jak nakreslit psa. Kostry psů a koček jsou zcela podobní, zejména v zjednodušené verzi zde..

Jak animovat s knihovnou mo.js

jak Sep 11, 2025

(Image Credit: Pexels / Frank Kagumba) Mo.js je jedinečná knihovna pohybu pohybu JavaScript, která nejen usnadňuj..

7 Top tipy pro zahájení vlastního podnikání

jak Sep 11, 2025

Pokud jste se cítili uvízl v kreativní říji, může to být za chvilku, aby si vzal svou kariéru a rozhodl se, kam chcete j..

Snadné pózování techniky pro 3D modely

jak Sep 11, 2025

Byl jsem animačním režisérem za posledních pár let a spolupracovali s mnoha animátory a pomáhali jim zdokonalit své dove..

Jak udělat MandelBulb

jak Sep 11, 2025

MandelBulb je trojrozměrný fraktál, který je stále populárnější 3D umění a VFX. V tomto článku půjdu..

Vytvořit animovaný textový textový efekt

jak Sep 11, 2025

Přidání efektů na text může přidat zcela novou úroveň angažovanosti a zájmu. Účinky, jako je Kinetická typo..

3 Tipy pro Crafting Ohromující tisk Propagační materiál

jak Sep 11, 2025

Ve stále více digitálním světě má chytře vytvořený tisk propagačního materiálu sílu, aby se vážný dopad. Možná..

Jak přidat texturu na pasty s primery

jak Sep 11, 2025

Použitím Pastel Primers. Vytváření povrchů pro vaše umění znamená, že můžete vytvořit více texturov..

Kategorie