Cum să începeți cu SASS

Sass. Este un instrument puternic care aduce multe caracteristici din alte limbi de programare în CSS - cum ar fi funcțiile, variabilele și bucle - precum și aducerea propriilor caracteristici intuitive, cum ar fi mixinele, cuibări și partiale pentru a numi câteva.

În acest tutorial vom crea icoane sociale folosind buclele de SASS, mixinele și funcțiile. De asemenea, vom folosi cuiburile puternice disponibile în SASS.

• Ce este SASS?

Vom crea o listă în SASS pentru a genera pictogramele noastre sociale, care vor consta din clasaName, referință și culoarea fontului - și mai târziu Tooltip.

Și vom folosi mixinele pentru a crea interogări media reutilizabile și a crea o funcție pentru a transforma o valoare pixelului într-o valoare EM. Pentru a face acest lucru, vom crea, de asemenea, o variabilă pentru dimensiunea fontului de bază.

Există o serie de modalități de instalare și utilizare a SAS în funcție de sistemul dvs. și de nevoile dvs. de instrumente de construcție - pot fi găsite mai multe detalii Aici - Cu toate acestea, vom folosi CodePen pentru a ne compila SASS în CSS pentru a păstra lucrurile cât mai simple.

Pentru a valorifica cu adevărat puterea de a SASS și nu vă aduceți într-o mizerie de specificitate și complexitatea o înțelegere solidă a CSS este necesară. Aroma particulară a lui SASS vom folosi este SCSS (Sassy CSS), adică vom folosi în continuare parantezele Curly {} în codul nostru SASS.

Obțineți fișierele Tutorial

Pentru a descărca fișierele de exemplu pentru acest tutorial, mergeți la Filesilo. , selectați Free Stuff și Conținut gratuit lângă Tutorial. NOTĂ: Utilizatorii de prima dată vor trebui să se înregistreze pentru a utiliza Filesilo.

01. Configurați codul CSS

Primul lucru va trebui să facem este Creați un stilou nou și să schimbați unele dintre setările implicite pentru editorul CSS din CodePen. Vom schimba preprocesorul CSS la SCSS și vom activa normalizarea și autoprefixerul.

02. Începeți să scrieți un cod

Acum am pus totul în sus putem începe să scriem un cod. În interiorul editorului HTML vom crea un container și un număr de elemente din interior care conțin link-ul și pictograma pentru fiecare dintre pictogramele noastre.

Numele folosite aici vor fi utilizate în lista noastră de SAS ca referință în CSS. De asemenea, vom folosi Convenția de numire a BEM pentru numele nostru de clasă.

 & Clasa Div = "Social__container" & GT;
  & lt; div clasa = "social__item" & gt;
  & lt; o țintă = "_ goală" href = "..."
  CLASS = "SOCIAL__ICON - TWITTER" & GT;
  & lt; i clasa = "icon - Twitter" & gt; / i & gt;
  & lt; / a & gt;
  & lt; / div & gt;
  ...
& lt; / div & gt; 

03. Setați stilurile de bază

Trecerea la editorul CSS vom începe prin includerea font-minunat, stabilind o variabilă pentru dimensiunea fontului de bază și câteva stiluri de bază pentru pagină.

 URL-ul @import (http://srt.lt/w8yt8);
// variabile
$ bază-font-dimensiune: 16px;
// Styling de bază
corp {
  Font-dimensiune: $ Base-font-dimensiune;
  ...
} 

04. Creați o funcție de bază

În continuare vom crea o funcție de bază pentru a transforma o valoare a pixelului unei valori EM utilizând variabila "$ Base-Size-Dimensiune".

Funcțiile în SASS sunt create utilizând "Funcție" urmată de numele funcției și de intrarea utilizată pentru a efectua funcția.

Apoi, în interiorul declarației folosim "@return" pentru a scoate valoarea când utilizați funcția. "# {}" Care înconjoară calculul este utilizat pentru interpolare .

 // funcții
Px-to-em ($ pixeli) {
@return # {$ pixeli / $ Base-font-size} em;
} 

05. Faceți mixini

Continuând cu configurația noastră, vom crea mixuri pentru interogările simple media mobile, utilizând funcția noastră "Px-to-Em", pe care vom trece într-o valoare PX pentru a returna o valoare EM.

Mixinele sunt create folosind "@mixin" urmate de un nume pentru mixin. Apoi, în interiorul declarației, folosim "@Content" pentru a scoate codul pe care l-am pus în interiorul mixinului atunci când îl sunați mai târziu în codul nostru de coduri.

 @Mixin Viewport - mare {
  @Media numai ecran și
  (min-lățime: px-to-em (1680px)) {
  @conţinut;
}}
@Mixin Viewport - Mediu {
  @Media numai ecran și
  (min-lățime: Px-to-Em (1080px)) {
  @conţinut;
}} 

06. Configurați o listă de SASS

Ultimul pas din configurația noastră este de a crea o listă. Listele din SAS sunt create utilizând o variabilă; După aceea, sintaxa exactă este destul de liberă, acceptând o mare varietate de modalități de ao defini .

În interiorul variabilei vom defini numele clasei, valoarea și culoarea Unicode pentru fiecare pictogramă, separarea acestora cu o virgulă, paranteze interioare.

 $ icon-listă: (
  Vimeo "\ F27D" # 1AB7EA,
  Twitter "\ F099" # 1DA1F2,
  ...
  GitHub "\ F113" # 333,
  RSS "\ F09E" # F26522
); 

07. Afișați pictogramele la rând

Pentru ca icoanele noastre sociale să fie afișate în rând, vom adăuga unele simple CSS pentru fiecare dintre recipientele lor.

 .Social__ITEM {
  Afișaj: Inline-bloc;
  Marginea-dreapta: 0.05EM;
} 

08. Creați un stil de pictograme partajat

Pentru a minimiza cantitatea de CSS, ieșim, vom folosi un selector CSS3 pentru a găsi toate clasele care încep cu "pictograma" și pentru a crea un stil comun pentru ei.

 [clasa ^ = "icon"] {
  Font-Family: "Fontawesome";
  Vorbește: Nici unul;
  Font-stil: normal;
  Greutatea fontului: normal;
  Varianta de font: normal;
  Transformare text: Nici unul;
  Linie-înălțime: 1;
  -webit-font-netezire: antialiat;
  -Moz-OSX-Font-Smoothing: Grayscale; } 

09. Benzile butonului de stil Up

Folosind aceeași metodă, vom face același lucru pentru butoanele care definesc valorile noastre în "em", permițându-ne mai târziu pentru a le redimensiona cu ajutorul recipientului.

 [Clasa ^ = "Social__Con"] {
  Font-dimensiune: 1em; Lățime: 2EM; Înălțime: 2EM;
  Culoare de fundal: # 333;
  culoare albă;
  Text-decorare: Nici unul;
  Raza de frontieră: 100%;
  Text-align: centru;
  Afișaj: Flex;
  Align-elemente: centru;
  Justificare-Conținut: Centrul;
} 

10. @ o buclă pentru icoanele noastre

Acum avem toate stilurile noastre de bază pe care le putem folosi lista noastră pentru a genera specificul CSS pentru fiecare pictogramă.

Pentru a crea o buclă în SASS folosim "@each" urmată de nume pentru fiecare valoare a fiecărui element - "icoana $", '$ Unicode' și '$ icon-fundal "- urmată de cuvântul" în "și apoi numele" și apoi numele din listă.

În interiorul buclă vom aplica valoarea "$ Unicode" la elementul "Înainte de" Pseudo a fiecărei pictograme pe care le-am creat în HTML, permițând stilului comun pe care l-am creat mai devreme pentru a avea grijă de toate celelalte stiluri necesare.

 @ech icon, $ Unicode, $ icon-fundal
În lista de icoane $ {
  .icon - # {$ icon} {
  & Amp; :: înainte de {
  Conținut: $ Unicode;
  }
  }
} 

11. @ Fiecare buclă pentru culorile noastre de fundal

Pictogramele sunt acum toate de lucru, dar avem încă culoarea fundalului de rezervă. Vom adăuga mai multe coduri în lista noastră pentru a rezolva asta. Folosind aceeași metodă ca mai sus, vom emite numele "icon icon", dar de data aceasta pe clasele "Social__Con" și în interiorul culorii "icon-icon-fundal".

 @ech icon, $ Unicode, $ icon-fundal
În lista de icoane $ {
  ...
  .Social__icon - # {icon} {
  fundal-culoare: $ icon-fundal;
  }
} 

12. Folosiți mixinele

Folosind mixinele pe care le-am creat mai devreme și pentru că am decolat icoanele folosind valorile "em", putem aplica o dimensiune a fontului containerului și o cresc utilizând mixinul nostru de interogare utilizând "@include" și numele mixinului urmat de Cod Vrem să includem în interogarea media.

 .Social__container {
  Font-dimensiune: 1em;
  @include Viewport - Mediu {
  Font-dimensiune: 1,5EM;
  }
  @include Viewport - mare {
  Font-dimensiune: 2EM;
  }} 

13. Adăugați statele de interacțiune și funcțiile încorporate

Putem adăuga o anumită interactivitate la butoanele noastre prin schimbarea culorii de fundal când butonul este interacționat fie cu utilizând mouse-ul sau tastatura.

Sass are un număr de Funcții de culoare încorporate Permițându-ne să luăm culoarea de fundal pe care am pus-o în lista noastră și o amestecăm cu negru pentru a întuneca butonul - când este interacționat.

 pictograma - # {$ icon} {
  fundal-culoare: $ icon-fundal;
  & Hover,
  & Focus,
  & Active {
  culoare de fundal:
  amestec (negru, icoana icon-fundal, 15%);
  }} 

14. Tranziția culorii de fundal

De asemenea, putem utiliza proprietatea "tranziție" în CSS pentru a anima diferențele dintre culorile de fundal. Am putea folosi valoarea "toate", dar ambele sunt scumpe în ceea ce privește performanța și nu ne-ar permite să tranzităm diferite valori la diferite temporizări și funcții de sincronizare.

 [Clasa ^ = "Social__Con"]{
  ...
  Tranziție: culoarea fundalului
  150ms ușurați-out
  ;
} 

15. Adăugați alte efecte de tranziție

Prin adăugarea unei poziții "relative" la butoane și o valoare superioară și adăugarea "de sus" la proprietatea noastră de "tranziție" putem pregăti elementele pentru o interacțiune ulterioară.

 [Clasa ^ = "Social__Con"] {
  Poziție: rudă;
  Top: 0;
  ...
  Tranziție: culoarea fundalului
   150ms ușurință,
    Top 250 ms liniară
  ; } 

16. Mutați butoanele în funcție de interacțiune

Pentru această interacțiune nu este nevoie de nimic specific pentru ao crea, prin urmare, putem adăuga codul la clasa comună. Prin aplicarea unei valori de top negative și eliminarea conturului, avem un vizoriu vizual și mai clar de interacțiune.

 [Clasa ^ = "Social__Con"] {
  ...
  & Hover,
  & Focus,
  & Active {
  Schiță: Nici unul;
  Top: -0,25EM;
  }} 

17. Adăugați o umbră de picătură

De asemenea, putem folosi aceeași metodă pentru a crea și anima o "umbra de box" - adăugând o adâncime mai mare la interacțiunea - schimbarea înălțimii verticale a umbrei în același timp cu cea mai bună valoare.

 Box-umbra:
  0 0 0.25EM -0.25EM RGBA (0,0,0,0,2);
& Hover,
& Focus,
& Active {
  ...
  Box-umbra:
  0 0.5EM 0.25EM -0.25Em RGBA (0,0,0,0,3);
} 

18. Adăugați unelte

Putem adăuga cu ușurință unelte cu CSS pentru a adăuga o mai bună claritate pentru utilizatorii noștri. Primul lucru pe care îl vom face este să adăugăm valoarea instrumentului pe listă. Asigurați-vă că le-ați scrie în citate pentru a permite utilizarea spațiilor, dacă este necesar.

 $ icon-listă: (
  Vimeo "Vimeo" "\ F27D" # 1AB7EA,
  Twitter "Twitter" \ F099 "# 1DA1F2,
  ...
  GITHUB "GITHUB" "\ F113" # 333,
  RSS "RSS" "\ F09E" # F26522,
); 

19. Modificați bucla @ech

Datorită adăugării la lista noastră, va trebui să modificăm bucla "@ech" pentru a include valoarea ToolTip (denumirea $ "). Putem apoi să ieșim acel nume ca fiind conținutul elementului "înainte de pseudo" pe butoanele noastre.

 @ @ech $ icon, $ nume, $ Unicode,
  $ icon-fundal în $ icon-list {
  ...
  .Social__icon - # {icon} {
  ...
  & Amp; :: înainte de {
  Conținut: "# {$ name} ';
  }
  }} 

20. Stilul înainte de elementul Pseudo

Acum avem numele fiecărui element afișat pe ecran, trebuie să stilul elementului, adăugând o culoare de fundal, umplutură și alte elemente de stil - precum și poziționarea elementului și pregătirea acesteia pentru tranziții și modificarea opacității și a valorilor de vârf la interacțiune .

 & AMP; :: înainte de {...
  Top: -3.5em;
  Opacitate: 0;
  tranziție:
  Top 250 ms liniară, opacitate 150ms liniară 150ms;
}
& amp:: Hover, ... {...
  & Amp; :: înainte de {
  Opacitate: 1;
  TOP: -2,5EM; }
} 

21. Stilul după elementul Pseudo

Noi vom folosi CSS triunghiuri Pentru a crea partea de jos a instrumentului nostru - poziționarea din nou a elementului pregătit pentru tranziții - prin trecerea opacității și a valorilor de vârf la diferite momente.

Prin adăugarea unei întârzieri, obținem o animație constând din uneltipul care se estompează și se mișcă în poziție.

 & AMP; :: După {...
  TOP: -1,9EM;
  Opacitate: 0;
  tranziție:
  Top 250 ms liniară, opacitate 150ms liniară 150ms;
}
& amp:: Hover, ... {...
  & Amp; :: după {
  Opacitate: 1;
  Top: -0,9em; }
} 

Colecția de codePen de pași de tutorial poate fi găsită Aici .

Acest articol a apărut inițial în revista Web Designer Problema 264. Cumpărați-l aici .

Citeste mai mult:

• Ce este SASS?
• 8 caracteristici de codPen pe care nu le cunoașteți
• 5 sfaturi pentru Super-Fast RSS