Hogyan kezdjük el a SASS-t

Sass Egy hatékony eszköz, amely sok funkciót hoz a többi programozási nyelvtől a CSS-be - mint például a funkciók, változók és hurkok -, valamint saját intuitív funkciókat, például a mixineket, a fészket és a részleges neveket nevezni.

Ebben a bemutatóban szociális ikonokat hozunk létre Sass Hurkok, Mixins és funkciók segítségével. A SASS-ben elérhető erőteljes fészket is használjuk.

• Mi a sass?

A SASS-ben létrehozunk egy listát, hogy létrehozzuk a szociális ikonokat, amelyek az osztálynévből, betűtípus-referenciából és színből állnak elő, és később az eszköztipp.

És mixineket használunk az újrafelhasználható média lekérdezések létrehozásához és egy funkció létrehozásához, hogy egy pixelértéket EM értékre fordítsák. Ehhez egy változót is létrehozunk a bázis betűméretünkhöz.

Számos mód van a SASS telepítésére és használatára a rendszertől és az építési szerszámok igényeitől függően - További részletek találhatók itt - Azonban a Codepen-t használjuk, hogy összegyűjtsük a SASS-t a CSS-be, hogy a lehető legegyszerűbbek legyenek a dolgokat.

Ahhoz, hogy valóban kihasználhassák a Sass erejét, és ne kapj magadnak a specifitás és a komplexitás rendetlenségét, a CSS szilárd megértése szükséges. A SASS különleges íze SCSS (Sassy CSS), ami azt jelenti, hogy még mindig a göndör zárójeleket használjuk {} a Sass kódunkban.

Szerezd meg a bemutatófájlokat

A bemutatófájlok letöltéséhez a bemutatóhoz menjen Filesilo , Válassza ki az ingyenes dolgokat és ingyenes tartalmakat a bemutató mellett. Megjegyzés: Az első alkalommal a felhasználóknak regisztrálni kell a Filesilo használatához.

01. Állítsa be a Codepen CSS-t

Az első dolog, amit meg kell tennünk Hozzon létre egy új tollat és módosítsa a CSS-szerkesztő alapértelmezett beállításait a Codepen-ben. Megváltoztatjuk a CSS preprocesszort az SCS-k és a normalizálás és az autoprefixer bekapcsolása.

02. Kezdje el néhány kód írását

Most mindent felállítottunk, hogy elkezdhetünk írni néhány kódot. A HTML-szerkesztő belsejében létrehozunk egy tartályt és számos elemet, amely tartalmazza a linket és az ikonokat az egyes ikonokhoz.

Az itt használt neveket a Sass listánkban a CSS referenciaként használják. Azt is használjuk, hogy az osztályneveinknek a Bem-nevezési egyezményt használják.

 & lt; div osztály = "Social__Container" & gt;
  & lt; div osztály = "Social__Item" & gt;
  & lt; egy cél = "_ üres" href = "..."
  osztály = "Social__Icon - Twitter" & gt;
  & lt; i class = "ikon - Twitter" & gt; & lt; / i & gt;
  & lt; / a & gt;
  & lt; / div & gt;
  ...
& lt; / div & gt; 

03. Állítsa be az alapstílusokat

A CSS-szerkesztőre való áttérés a Font-Awesome-t is elkezdjük, és egy változót állítunk be az alapbetűs méretű és néhány alapvető stílusunkhoz.

 @Import URL (http://srt.lt/w8yt8);
// változók
$ bázis-betűméret: 16px;
// Alapvető stílus
test {
  Betűméret: $ bázis-betűméret;
  ...
} 

04. Alapvető funkció létrehozása

Ezután létrehozunk egy alapvető funkciót, hogy egy pixel értéket hozzunk be egy EM értékre a "$ bázis-betűméret" változó segítségével.

A SASS funkcióit a "@ funkció" segítségével hozták létre, majd a funkció nevét és a funkció végrehajtásához használt bemenetet.

Majd belül a nyilatkozat használjuk „@return” a kimeneti értéket a funkció használatakor. A számítással körülvevő "# {}" interpoláció .

 // funkciók
@function px-to-em ($ pixels) {
@return # {$ pixels / $ base-betűméret} em;
} 

05. Make Mixins

Folytatva a beállítási fogunk létrehozni mixinek egyszerű mobil-első médialekérdezéseket a mi „px-to-em” funkció, amely azt fogja át a px értéket ad vissza em értéket.

A mixineket a "@mixin" segítségével hozták létre, majd a mixin nevét. Majd belül a nyilatkozat használjuk „@content”, hogy kiírja a kódot, betenni a mixin hívás esetén később a mi codebase.

 @mixin nézetablak - nagy {
  @media csak képernyő és
  (MIN-WIDTH: PX-TO-EM (1680PX)) {
  @tartalom;
}}
@mixin Viewport - Medium {
  @media csak képernyő és
  (MIN-WIDTH: PX-TO-EM (1080PX)) {
  @tartalom;
}} 

06. Állítsa be a SASS listát

A telepítés utolsó lépése a lista létrehozása. A SASS-ben lévő listák változó segítségével hozhatók létre; Ezután a pontos szintaxis elég laza, elfogadva a széles választékát módja annak meghatározására .

A változó belsejében meghatározzuk az osztály nevét, az Unicode értékét és színét minden ikonra, elválasztva őket vesszővel, zárójelben.

 $ ikon-lista: (
  Vimeo "f27d" # 1ab7ea,
  Twitter "f099" # 1da1f2,
  ...
  Github "f113" # 333,
  RSS "f09e" # F26522
); 

07. Az ikonokat egymás után jelenítse meg

Annak érdekében, hogy a szociális ikonok megjelenjenek a sorban, hozzáadunk néhány egyszerű CSS-t az összes tartályához.

 .social__item {
  Kijelző: inline-blokk;
  Margin-Right: 0.05em;
} 

08. Hozzon létre egy megosztott ikonstílust

A CSS mennyiségének minimalizálása érdekében CSS3 választógombot használunk, hogy megtaláljuk az "Icon" -val kezdődő osztályokat, és hozzon létre egy közös stílust.

 [osztály ^ = "ikon"] {
  Font-Család: "Fontawesome";
  Beszéljen: Nincs;
  betűtípus-stílus: normális;
  betűsúly: normál;
  betűtípus-változat: normál;
  szöveges transzformáció: nincs;
  Line-Magasság: 1;
  -Webkit-betűtípus-simítás: antialias;
  -Moz-OSX-betűtípus-simítás: szürkeárnyalatos; } 

09. Stílus fel gomb hátterek

Ugyanezzel a módszerrel ugyanezt tesszük, ha az "Em" értékeinket meghatározó gombok, amelyek lehetővé teszik számunkra, hogy később átméretezzük őket a tartály használatával.

 [osztály ^ = "Social__icon"] {
  betűméret: 1em; Szélesség: 2em; Magasság: 2em;
  Háttérszín: # 333;
  fehér szín;
  Szöveges dekoráció: nincs;
  Border-sugara: 100%;
  Text-Align: Center;
  Kijelző: FLEX;
  Align-tételek: Központ;
  Indokolás-tartalom: Központ;
} 

10. @Each hurok az ikonokhoz

Most már minden bázisstílusunk van, használhatjuk listánkat, hogy létrehozzuk az egyes ikonokra vonatkozó CSS-t.

Ahhoz, hogy hurkot hozzunk létre a SASS-ben, használjuk a "@Each", amelyet az egyes elemek minden egyes értékének nevét követünk - "$ ikont", "$ Unicode" és "$ Unicode" és '$ Icon-Background' - követve, majd a "in", majd a név a lista.

A hurok belsejében a "$ Unicode" értéket az egyes ikonok előtt "$ Unicode" értéket alkalmazzuk, amelyet a HTML-ben hoztunk létre, így a megosztott stílust korábban létrehoztuk, hogy gondoskodjunk a többi szükséges stílusra.

 @ @Each $ ikon, $ Unicode, $ ikon háttér
A $ ikonlistában {
  .Icon - # {$ icon} {
  & amp; :: korábban {
  Tartalom: $ Unicode;
  }
  }
} 

11. @ @each hurok a háttérszínünkre

Az ikonok most mindenütt dolgoznak, de még mindig van a hátrack háttér színe. Adunk hozzá néhány kódot a listánkhoz, hogy javítsa meg. Ugyanezzel a módszerrel, mint fent, a "$ ikont" nevet adjuk meg, de ezúttal a "Social__ikon" osztályokon és belül, hogy a "$ ikon háttér" színe.

 @ @Each $ ikon, $ Unicode, $ ikon háttér
A $ ikonlistában {
  ...
  .social__ikon - # {$ icon} {
  Háttérszín: $ ikon háttér;
  }
} 

12. Használja a mixineket

A korábban létrehozott mixins használatával és azért, mert az "EM" értékeket használjuk az ikonokat, betűméretet alkalmazhatunk a tartályra, és növelhetjük azt a média-lekérdezési mixin segítségével a "@include" és a mixin nevét, majd a kódot szeretnénk beilleszteni a média lekérdezésére.

 .social__container {
  betűméret: 1em;
  @Include Viewport - Medium {
  betűméret: 1.5em;
  }
  @Include Viewport - Nagy {
  betűméret: 2em;
  }} 

13. Adjon meg interakciós állapotokat és beépített funkciókat

A háttérszínünk megváltoztatásával néhány interaktivitást hozzáadhatunk, ha a gombot az egér vagy a billentyűzet segítségével kölcsönhatásba léphetünk.

A SASS számos Beépített színes funkciók Lehetőség arra, hogy a háttérszínt a listánkban beállítottuk, és fekete-el keverjük, hogy sötétítse a gombot - amikor kölcsönhatásba lép.

 ikon - # {$ icon} {
  Háttérszín: $ ikon háttér;
  & amp;: Hover,
  & amp;: fókusz,
  & amp;: aktív {
  háttérszín:
  Mix (fekete, $ ikon háttér, 15%);
  }} 

14. Átalakítsa a háttérszínt

Az "átmenet" tulajdonságot is felhasználhatjuk a CSS-ben, hogy a háttérszínek közötti különbségeket animáljunk. Az "minden" értéket használhatjuk, de ez mind a teljesítmény szempontjából drága, és nem engedné meg, hogy különböző értékeket változtassunk különböző időpontokban és időzítési funkciókban.

 [osztály ^ = "Social__icon"]{
  ...
  Átmenet: háttérszín
  150ms könnyű-in-out
  ;
} 

15. További átmeneti hatások hozzáadása

A "rokon" pozícionáláshoz a gombokhoz és a felső értékhez és a "átmeneti" tulajdonsághoz való hozzáadásával, valamint az "átmenet" tulajdonsághoz való hozzáadásával készíthetjük az elemeket további interakcióhoz.

 [osztály ^ = "Social__icon"] {
  Pozíció: relatív;
  Top: 0;
  ...
  Átmenet: háttérszín
   150ms könnyű-in-out,
    Top 250ms lineáris
  ; } 

16. Mozgassa a gombokat az interakció során

Ehhez az interakcióhoz semmi konkrét szükséges ahhoz, hogy hozza létre, ezért hozzáadhatjuk a kódot a megosztott osztályhoz. A negatív felső érték alkalmazásával és a vázlat eltávolításával még egyértelműbb vizuális interakcióval rendelkezünk.

 [osztály ^ = "Social__icon"] {
  ...
  & amp;: Hover,
  & amp;: fókusz,
  & amp;: aktív {
  Vázlat: Nincs;
  Top: -0.25em;
  }} 

17. Adjon hozzá egy csepp árnyékot

Ugyanezt a módszert is használhatjuk, hogy létrehozzunk és animáljunk egy "doboz-árnyék" - egy kicsit mélyebb mélységét az interakcióhoz - az árnyék függőleges magassága egyidejűleg, mint a felső érték.

 Box-Shadow:
  0 0 0.25EM -0.25EM RGBA (0,0,0,,0,2);
& amp;: Hover,
& amp;: fókusz,
& amp;: aktív {
  ...
  Box-Shadow:
  0 0.5EM 0.25EM -0.25EM RGBA (0,0,0,0,3);
} 

18. ToolTips hozzáadása

Könnyedén hozzáadhatunk eszköztippeket a CSS-vel, hogy további tisztaságot adjunk hozzá a felhasználók számára. Az első dolog, amit meg kell tennünk, hogy hozzáadjuk az eszköztipp értéket a listához. Győződjön meg róla, hogy írja őket idézőjelekben, hogy engedélyezze a szóközök használatát, ha szükséges.

 $ ikon-lista: (
  Vimeo "Vimeo" "\ f27d" # 1ab7ea,
  Twitter "Twitter" "" f099 "# 1da1f2,
  ...
  github "github" "f113" # 333,
  RSS "RSS" "\ f09e" # F26522,
); 

19. Módosítsa az @Each hurkot

A listánk hozzáadásának köszönhetően módosítanunk kell a "@Each" hurokunkat, hogy tartalmazza az eszköztipp értéket ("$ NAME"). Ezután kimenhetjük ezt a nevet, mint a "Pseudo" elem tartalmát a gombokon.

 @ @Each $ ikon, $ név, $ Unicode,
  $ ikon-háttér $ ikonlistában {
  ...
  .social__ikon - # {$ icon} {
  ...
  & amp; :: korábban {
  Tartalom: '# {$ NAME}';
  }
  }} 

20. Stílus a pszeudo elem előtt

Most már a képernyőn megjelenő elemek neve van, amire szükségünk van az elemet, hozzáadva az elemet, hozzáadva a háttérszínt, a paddingot és más styling elemeket -, valamint az elem elhelyezését, valamint az átmeneti átmenetet és az átirányítás és a felső értékek módosítását az interakció során .

 & amp; :: korábban {...
  Top: -3.5em;
  Opacity: 0;
  átmenet:
  Top 250ms lineáris, opacitás 150ms lineáris 150ms;
}
& amp;: Hover, ... {...
  & amp; :: korábban {
  Opacity: 1;
  Top: -2.5em; }
} 

21. Stílus A Pseudo elem után

Használni fogjuk CSS háromszögek Az eszköztippek aljének létrehozása - ismét az átmeneti átmeneti elem elhelyezése - az átmeneti és felső értékek átültetésével különböző időzítésekben.

A késleltetés hozzáadásával egy olyan animációt kapunk, amely az eszköztippelést tartalmazza, és a helyére mozog.

 & amp; :: Miután {...
  Top: -1.9em;
  Opacity: 0;
  átmenet:
  Top 250ms lineáris, opacitás 150ms lineáris 150ms;
}
& amp;: Hover, ... {...
  & amp; :: Miután {
  Opacity: 1;
  Top: -0.9em; }
} 

A bemutató lépések Codepen gyűjteménye megtalálható itt .

Ez a cikk eredetileg megjelent a Web Designer magazin 264-ben. Vásárolja meg itt .

Olvass tovább:

• Mi a sass?
• 8 Codepen funkciók, amelyeket nem tudott
• 5 tipp a szupergyors CSS-hez