Stilul unui site folosind SASS

Puteți face foarte mult cu CSS - poate mai mult decât credeți - dar limbajul foii de stil venerabil are limitările sale. Într-un proiect Web modern, cu module NPM, cadrele JavaScript, ES6 și multe altele, se poate simți oarecum anacronic să se întoarcă la scrierea vanilie CSS.

Din fericire, există opțiuni care vă permit să utilizați alte limbi care compilează la CSS. Se numește "preprocesoare", aceste instrumente integrează în procesul de construire a web și generează foi de stil utilizabile din orice limbă de extensie pe care ați ales-o.

SASS (foile de stil minunate sinceră) este una dintre cele mai populare dintre aceste opțiuni - Citiți mai multe cu ghidul nostru Ce este SASS? SASS adaugă multe caracteristici noi de limbă valoroase care nu sunt (în prezent) disponibile în CSS pentru a vă ajuta să faceți site-urile și aplicațiile mai întreținute. Acestea includ lucruri cum ar fi amestecurile și directivele de control, care au un sunet descurajator, dar sunt de fapt destul de simple și ne vom uita la acestea în acest tutorial. Dacă doriți să păstrați lucrurile chiar mai simple, ați putea utilizatorul a Builder de site-uri web .

• Se răcește animații CSS pentru a recrea

Există de fapt două sintaxe diferite pentru SASS, una care utilizează o extensie de fișier .Scss și una care utilizează .SASS. Primul arată mai mult ca CSS (de fapt, toate fișierele .css sunt fișiere valide), în timp ce acesta din urmă elimină paranteze și punct și virgulă CSS în favoarea indentării și liniilor noi. Ne vom concentra pe .Scss, dar alegerea este pur și simplu până la preferințele personale. Actualizarea site-ului dvs.? Asigurați-vă că ați făcut-o web hosting Serviciul face ceea ce aveți nevoie și obțineți-vă Stocare in cloud Dreapta, de asemenea.

Descărcați fișierele pentru acest tutorial aici (Ediția 282)

01. Configurați compilatorul

Utilizarea SASS necesită, în esență, un compilator. Cea mai simplă modalitate de a face acest lucru ar fi la linia de comandă. Puteți face acest lucru folosind homebrew. Compilatorul SASS este implementat în mai multe limbi diferite, iar homebrew va instala versiunea Dart, care este rapidă.

brew install sass/sass/sass

02. Creați un fișier SASS

Să încercăm să creăm un fișier SAS simplu pentru a vedea compilatorul în acțiune. Unul dintre cele mai simple concepte din SAS este variabilele, care pot fi specificate o dată cu a $. prefix și apoi folosit pe tot parcursul codului. Vom crea SASS-INPUT.Scss. .

 $ Culoare text: #CCCCCC;
corp {
    Culoare: $ Text-culoare;
} 

03. Compilația liniei de comandă

Acum putem rula compilatorul SASS la linia de comandă pentru a converti fișierul .Scss în ieșirea CSS. Veți observa în fișierul de ieșire că variabilele au dispărut și suntem doar lăsați cu sintaxa standard CSS care este utilizabilă de browser.

 SASS SASS-INPUT.SCSS CSS-OUTPUT.CSS 

04. Automatizați construirea dvs.

Acest lucru este minunat, dar nu doriți să rulați manual compilatorul de sass de fiecare dată când faceți schimbări. O opțiune este aceea de a asculta pentru modificări ale fișierelor într-un director și recompilați automat ieșirea într-un alt director (conservarea numelui de fișiere). Acest lucru vă permite, de asemenea, să vă separați fișierul sursă .Scss de la CSS construit.

 Mkdir src
MKDIR SRC / SASS
Mkdir Public.
Mkdir Public / CSS
SASS - SAS / SASS /: Public / CSS /

05. Jucați cu SASS Styling

Acum, să ne uităm la un site simplu de pornire, pe care îl putem folosi pentru a juca cu SASS Styling. Putem începe prin clonarea unui site de exemplu dezactivat. Lucrul cheie de observat este că pagina noastră HTML nu știe nimic despre SASS. Are un singur punct de intrare al fișierului CSS, pe care îl vom crea în continuare.

 Public CD
curl -o index.html https: // brut.
githubusercontent.com/simon-a-j/sass-
tutorial/
Master / Public / index.html 

06. Principalul stil de stil

Folosim stiluri.css ca punct principal de intrare CSS, care ulterior vom folosi pentru a importa alte module. Acest lucru înseamnă că trebuie să spunem lui SASS să genereze acest fișier, deci trebuie, de asemenea, să creăm un fișier de stiluri în dosarul nostru SRC / SASS. Dacă alergi sass --watch. Ca și înainte, acest lucru va fi automat compilat în CSS în Public / CSS. Dosarul și reîmprospătarea site-ului dvs. vor afișa modificările sale. Încercați să faceți unele modificări și reîmprospătarea paginii HTML în browser în timp ce mergeți.

 // Styles.scs
corp {
  Font-Family: Sans-Seif;
  Text-align: centru;
}

07. Gestionați schema de culori

Să ne uităm la modul în care SASS ne poate ajuta să gestionăm o schemă de culori pentru site. Este obișnuit să aveți o paletă de cinci sau șase culori pentru o pagină web. Putem externaliza aceste lucruri _Colourss.scrs. . Prefixul de subliniere spune SASS să nu compileze acest lucru într-un nou fișier HTML (un "parțial"). Dar o putem folosi într-un mod ușor diferit.

 // holourss.scrs
$ color-primar: # 231651;
$ Color-secundar: # 2374ab;
$ culoare-lumină: # d6fff6;
$ Color-Highlight1: # 4dccbd;
$ Color-Highlight2: # FF8484;

08. Utilizați variabilele de culoare

Pentru a utiliza aceste variabile de culoare, tocmai am înființat-o, putem spune SASS să importe conținutul lui _Colourss.scrs. în foaia noastră principală de stil. Facem acest lucru folosind un @import afirmație. Odată ce ați făcut acest lucru, observați modul în care variabilele sunt rezolvate în fișierul CSS de ieșire.

 // Styles.scs
@import "_Colourss.scs";
corp {
  Font-Family: Sans-Seif;
  Text-align: centru;
  Fundal: Gradient linear (155DEG,
$ color-primar 70%, $ Color-secundar
70%);
  Culoare: $ Color-Light;
  Min-înălțime: 100VH;
}
H1 {
    Culoare: $ Color-Highlight1;
}
H2 {
  Culoare: $ Color-Highlight2;
}

09. stiluri de cuiburi

O altă caracteristică utilă a lui SASS este abilitatea de a cuibări stiluri. Adică, puteți specifica un stil pentru un element aplicat numai dacă elementul apare într-un element părinte. Să folosim acest lucru pentru a diferenția stilul nostru de legături în funcție de faptul dacă apar în antet sau în corp.

 A {
  Culoare: $ Color-secundar;
}
.profile-header {
  A {
    font-dimensiune: 16px;
    Margin-stânga: 10px;
    Marja-dreapta: 10px;
    Padding: 10px;
    Raza de frontieră: 5px;
    Culoare: $ Color-Light;
    Culoare de fundal: $ Color-secundar;
  }
}

10. Faceți rețea receptivă

Acum, să ne aranjăm conținutul într-un format de rețea receptiv. SASS are câteva caracteristici pentru a face acest lucru mult mai ușor de gestionat. Pe lângă utilizarea variabilelor pentru a specifica punctele noastre de întrerupere, putem cuibă @mass-media interogări în alte stiluri, ceea ce face ca comportamentul specific dimensiunii ecranului mult mai ușor de citit.

 $ Punct: 800px;
.profile-corp {
  Afișaj: Flex;
  Align-elemente: întindere;
  justificați-conținut: spațiu-în jurul valorii de;
  Margin-top: 32px;
  Margin-stânga: 10VW;
  Marja-dreapta: 10VW;
  @Media ecran și (max lățime:
$ breakpoint) {
      Flex-direcție: coloană;
  }
}
.profile-secțiunea {
  Culoare de fundal: $ Color-Highlight1;
  Culoare: $ Color-primar;
  Marja: 16px;
  Raza de frontieră: 10px;
  Lățime: 340px;
  .profile-content {
    Padding: 20px;
  }
  @Media ecran și (max lățime:
$ breakpoint) {
    Lățime: 100%;
  }
}

11. Introduceți mixurile

Mixinele sunt o altă caracteristică SASS puternică, pe care o puteți gândi ca o modalitate de a defini funcțiile de stil de stil reutilizabil. Un amestec este definit o dată, poate lua parametri și poate fi apoi invocat oriunde în codul dvs. SASS. Un caz de utilizare pentru aceasta este de a gestiona prefixarea vânzătorului. Dacă vrem ca o transformare CSS să lucreze în browserele mai vechi, acest lucru ar putea necesita o -webit. Prefixul pentru Chrome și Safari, de exemplu. Să definim un amestec care are grijă de asta pentru noi.

12. Mixine și variabile

De asemenea, putem folosi un amestec cu mai mulți parametri, combinați cu unele variabile pe care le definim, pentru a mânca mai elegant stilul diferitelor părți ale paginii. Dacă creăm o mixin care definește culoarea primului și fundal, acest lucru ne va permite să selectați aparențele pentru diferite secțiuni dintr-o listă finită de variabile de stil.

 $ stil1: (Foreground: $ Color-Light,
fundal: $ color-secundar);
$ style2: (prim-plan: $ color-primar,
Fundal: $ Color-Highlight1);
$ style3: (prim-plan: $ color-primar,
Fundal: $ Color-Highlight2);
@ stil de conținut @Mixin ($ prim plan,
$ background) {
  Culoare: $ Foreground;
  fundal-culoare: $ fundal;
} 

13. Folosiți-vă noul mixin

 -Profile-header {
  A {
    @ Influde stil de conținut ($ stil1 ...);
    // ...
  }
}
.profile-secțiunea {
    @ Influde stil de conținut ($ stil2 ...);
  // ...
}

14. Înțelegerea moștenirii

O altă caracteristică foarte puternică a lui SASS este moștenirea. Chiar acum avem două stiluri diferite pentru link-uri în pagina noastră. Dacă vrem să folosim stiluri comune în ambele, mai degrabă decât copierea și lipirea CSS, de ce nu folosim o clasă de substituenți, notată cu "%", care poate fi extinsă de amândouă, permițându-i să-și moștenească stilurile?

% Link-Shared {
  font-dimensiune: 16px;
  Margin-stânga: 10px;
  Marja-dreapta: 10px;
  Padding: 10px;
  Raza de frontieră: 10px;
}

15. Extindeți clasele

Acum putem extinde clasa comună de legătură pentru a defini stilul de legătură pe tot site-ul nostru. Acest lucru începe să arate destul de elegant. Definim ce legătură, în general, arată o singură dată, reutilizați-o și specificați culorile din paletă pentru fiecare legătură folosind un amestec.

 -Profile-header {
  A {
    @Extend% Link-partajat;
    @ Influde stil de conținut ($ stil1 ...);
  }
}
A {
  @Extend% Link-partajat;
  @ Influde stil de conținut ($ stil3 ...);
}

16. Modificați tema

Acum, să aruncăm o privire la cât de ușor este SASS să modifice tema site-ului nostru. Culorile curente ar putea să nu fie perfecte. Nu putem modifica numai variabilele de culoare, dar putem folosi și câteva funcții de SAS pentru a genera procedural culorile care se potrivesc cu un primar al alegerii noastre.

 // holourss.scrs
$ color-primar: # 2E1F27;
$ Color-secundar: Lighten ($ Color-primar,
25%);
$ Color-Light: Lighten ($ color-primar,
75%);
$ Color-Highlight1:
Lighten (complement ($ color-primar), 50%);
$ Color-Highlight2:
Lighten (complement ($ color-secundar), 50%);

17. Selectați un nou set de culori

Acum, putem modifica întreaga schemă de culori pentru site pur și simplu prin specificarea unei noi valori color-primare în _Colourss.scrs. fişier. Oferiți-i o încercare experimentată cu culori alternative. De asemenea, am putut să-l întâmpinăm (dar amintiți-vă că acest lucru se referă la punctul în care site-ul dvs. este construit, nu de runtime). De asemenea, puteți încerca ajustarea logicii pe care o folosim pentru a obține celelalte culori din temă de la primar.

 $ roșu: aleatoriu (255);
$ verde: aleator (255);
$ albastru: aleator (255);
$ Color-Primar: RGB ($ roșu, $ verde, $ albastru); 

18. Folosiți biblioteci

Sistemul de module al lui SASS face, de asemenea, foarte simplu să folosească biblioteci terțe cu efort minim și fără a transporta fișiere de execuție mari la utilizatorii finali. Să încercăm biblioteca marginilor înclinate, pe care o putem folosi pentru a crea margini înclinate pentru obiecte pe pagina noastră.

 Git clone https://github.com/josephfusco/
margini înclinate.Git SRC / SASS / margini înclinate

19. Miezul marginilor înclinate

Putem importa margini înclinate la fel ca și pentru schema noastră de culori. Este apoi utilizabil printr-o mixin care navează cu biblioteca. Să încercăm în clasa noastră de profil.

 @Import "margini înclinate / _angled-margini.scs";
.profile-secțiunea {
  @ enclude-margine înclinată ("partea de jos în afara",
"Dreptul inferior", $ Color-Highlight1);
  @ enclude-margine înclinată ("partea exterioară",
"Dreptul superior", $ Color-Highlight1);
  Marja: 120px 16px 120px 16px;
  // ...
}

20. Formatare de ieșire

Să terminăm prin privirea la ieșirea de ieșire. Dacă ați urmărit fișierele CSS, așa cum am făcut modificări, veți observa că rămân destul de lizibile. Cu toate acestea, puteți construi, de asemenea, SASS CSS condensat, care este mai puțin citibil, dar încă gata să navă. Puteți face acest lucru folosind --stil Flag de linie de comandă.

 SASS SRC / SASS /: Public / CSS /-Style
Comprimat 

21. mai mult Sass.

Am explorat acum câteva caracteristici ale lui Sass, iar site-ul nostru nu pare prea rău. Sperăm că începeți să vedeți cum ne ajută SASS să dezvoltăm foi de stil menajabile. Nu am acoperit fiecare caracteristică a limbii - există multe funcții mai utile expediate împreună cu acesta și caracteristici avansate, cum ar fi directivele de control (cum ar fi @dacă , @pentru și @in timp ce ) care sunt adesea folosite pentru a crea funcții complexe de bibliotecă. În general, amintiți-vă că SAS este în întregime o preferință stilistică. Puteți face tot ce am văzut cu CSS pură dacă doriți, dar ar trebui să vă gândiți cu siguranță la pre-procesarea pe măsură ce munca dvs. devine mai complexă.

Acest articol a fost publicat inițial în numărul 282 din Web designer . Cumpără Problema 282. sau Abonați-vă aici .

Citeste mai mult:

• 10 noi tehnologii CSS noi
• 3 proprietăți noi CSS strălucitoare pentru a încerca astăzi
• Great site-uri de derulare parallax