Importanța esteticii, impactul acesteia și instrumentul de realizare a acesteia.

Îmi amintesc în copilărie, de fiecare dată când mergeam la o brutărie, alegeam produsele de patiserie cu cele mai frumoase toppinguri. Abia după ce am primit prima mușcătură aș ști dacă era cea la care tânjeam.

Un fel de mâncare bine placat poate bate uneori gustul. Tendința de a alege aspectul are un impact semnificativ asupra alegerilor noastre. Această înclinație spre placare nu se limitează doar la alimente. Hainele la modă, un apartament decorat și o mașină bine proiectată sunt câteva exemple.

Un maestru bucătar înțelege importanța prezentării pentru un restaurant de succes. Arta de a garni poate diferenția o capodoperă culinară de farfuria unui novice. Mai mult, o placare creativă ar adăuga plăcere și gust, încurajând clienții să efectueze vizite frecvente. Web-ul nu este diferit de orice masă gourmet în acest sens. Impactul vizual a avut un rol crucial și în toate aplicațiile web de succes.

Trebuie să depuneți eforturi semnificative pentru ca aplicațiile web să arate plăcute. Aici intervin foi de tip Cascade Style Sheets (CSS).

Pe măsură ce web-ul evoluează, aplicațiile devin din ce în ce mai mari. Pentru a corespunde nevoilor noastre, avem nevoie de mai multe de la CSS. Dar CSS are unele limitări.

De când citiți acest articol, ați terminat deja toppingurile și acum este momentul să gustați restul tortului. Să vedem ce limitări are CSS și cum le putem depăși. Scopul este de a vă duce tehnica de placare la nivelul următor.

Condiții prealabile

Trebuie să aveți o înțelegere corectă a selectorilor CSS și CSS. De asemenea, veți avea nevoie de Node.js și npm instalate.

Limitări CSS

Identificarea limitărilor este subiectivă, deși aș dori să menționez câteva.

  1. Mecanism de programare: caracteristici precum variabile, funcții, clase și operatori lipsesc în CSS3 în sine.
  2. Fișier CSS lung: în aplicațiile bogate de interfață cu utilizatorul, foile de stil pot crește peste noapte. Fișierele mari pot fi un coșmar pentru întreținere.
  3. Operatori matematici absenți: operatorilor matematici le place +, -, *, / poate fi uneori foarte la îndemână.

Pentru a depăși astfel de limitări, avem limbaje de script pentru preprocesor.

Preprocesorul

Un preprocesator este un software care preia un fișier de intrare scris într-un anumit limbaj de programare și îl procesează pentru a produce un fișier urmând sintaxa unui alt limbaj. Este folosit pentru a extinde sintaxa unui limbaj de programare existent prin adăugarea de noi funcționalități.

Sass un preprocesor pentru garniturile dvs de pe web
ilustrație: preprocesorul Sass

Un preprocesor CSS extinde sintaxa CSS adăugându-i un mecanism de programare. SassScript este un superset al CSS. Când este compilat, creează blocuri CSS valide pentru aplicațiile dvs. web.

Există câteva preprocesoare CSS disponibile, cum ar fi Less, Stylus și Sass. Accentul nostru va fi pe Sass (foi de stil minunate din punct de vedere sintactic). Dar conceptul este mai mult sau mai puțin același pentru alți preprocesori.

Vom trece prin instalarea unui compilator Sass Node.js, iar mai târziu vom vedea diferite funcții Sass în acțiune. Deci, pregătește-te să-ți ornezi delicioasele rețete web?

Pregătirea lui Sass

Sass a fost scris mai întâi în rubin și apoi în alte limbi. Puteți alege dintre multe implementări disponibile. Pentru acest articol, vom rămâne la un pachet Node.js – nod-sass. Acest pachet folosește implementarea Sass de înaltă performanță în C numită libSassSass.

Primele lucruri mai întâi: Să instalăm node-sass. Apoi vom configura un exemplu de aplicație pentru a vedea diferite funcții Sass în acțiune. Deschideți un terminal pe mașină și executați comanda de mai jos.

npm install node-sass -g

Aici îi cerem managerului de pachete nodului să se instaleze node-sass pentru noi. Cu steag -g, am instalat pachetul la nivel global. Grozav! După ce se termină, asigurați-vă că totul este la locul său.

node-sass -v
1611470468 315 Sass un preprocesor pentru garniturile dvs de pe web
comanda pentru a verifica versiunea nod-sass.

Bine! Avem toate ingredientele de care am putea avea nevoie. Să vedem cu ce arome vine Sass și apoi vom începe călătoria noastră pentru a explora Sass.

Diverse arome de Sass

Există două moduri de a crea un fișier Sass. Puteți utiliza oricare dintre aceste două sintaxe.

  1. Stil Sass: Această sintaxă folosește indentarea pentru a separa blocurile de cod și liniile noi.
  2. Stil SCSS: Această sintaxă folosește blocuri ca un limbaj de programare. Vom folosi sintaxa SCSS în acest articol.

Notă: Este posibil să convertiți dintr-o sintaxă în alta printr-o simplă comandă Sass convert. Simțiți-vă liber să o adoptați pe cea care vă place.

Pregătirea preparatului principal

Deoarece suntem pregătiți Sass pe mașina noastră, putem începe să ne jucăm pentru a vedea ce caracteristici minunate ne poate aduce. Urmați împreună cu mine pentru a configura un exemplu de aplicație.

Aici îl folosesc Cod Visual Studio. Puteți utiliza orice editor de cod la alegere. Îl folosesc de mult timp și l-aș recomanda. Are câteva plugin-uri de productivitate interesante, care vă pot fi de mare ajutor.

Sass un preprocesor pentru garniturile dvs de pe web

Până în prezent, am creat un folder și două fișiere.

  1. index.html: un fișier HTML.
  2. style.scss: fișier script Sass root (sau principal).

Pentru început, să creăm un div, un h1, si doi buttons în fișierul HTML.

1611470469 795 Sass un preprocesor pentru garniturile dvs de pe web

Să parcurgem cele mai utilizate caracteristici Sass. Pe drum, vom vedea și blocurile CSS compilate.

Variabile

Variabilele vă ajută să centralizați proprietățile CSS. Le puteți atribui o dată în partea de sus a unui fișier și le puteți utiliza în tot fișierul. Aceste variabile sunt ca niște substituenți pentru valoarea unei proprietăți CSS. În Sass, un nume de variabilă trebuie să înceapă cu un $ semn.

Vom crea două variabile: $h1-color și $h1-height. Apoi vom folosi aceste variabile pentru a atribui proprietăți de culoare și înălțime unui h1 element. Mai jos este fragmentul Sass.

$h1-color     : blue;
$h1-height    : 50px;
h1{
   color  : $h1-color;
   height : $h1-height;
}

In regula! Până acum avem un fișier HTML și un fișier Sass. Dar fișierul CSS? Nu a apărut încă.

Ei bine, suntem aproape acolo. Deschideți terminalul pentru a merge la folderul pe care l-am creat și executați comanda de mai jos:

node-sass style.scss style.css

Parametrii pentru node-sass compilatorul sunt calea fișierului de intrare și ieșire. Acum, dacă deschideți HTML-ul pe care l-am creat în timpul configurării proiectului într-un browser, ar trebui să vedeți următoarele.

1611470469 183 Sass un preprocesor pentru garniturile dvs de pe web
HTML cu CSS aplicat

Observați că fișierul CSS este deja inclus în HTML headsecțiune.

Operatori

Operatorii matematici au fost întotdeauna lipsiți în CSS. Sass oferă operatori matematici de bază, cum ar fi adăugarea +, scădere -, multiplicare * și diviziune/.

Puteți utiliza împreună variabile și operatori pentru a manipula proprietățile CSS. Să luăm un exemplu. Putem folosi operatorii pentru a calcula căptușirea unui h1 element în funcție de lățimea părintelui său div. Vom folosi operatorul de divizare / pentru acest exemplu.

$h1-color   : blue;
$h1-font    : 50px;
$div-width  : 500px;
div{
   width: $div-width;
}
h1{
   color       :  $h1-color;
   height      :  $h1-font;
   padding     :  $div-width / 10;
}

Mixins

Mixinele sunt ca niște clase de bază abstracte. Mixinele sunt la îndemână pentru a grupa proprietățile asociate. Odată create, aceste mix-uri pot fi refolosite în restul blocurilor de stil. Mai mult, puteți chiar să transmiteți variabile. Confuz? Să luăm un exemplu.

Trebuie să fi observat că crearea unui stil pentru raza frontierei este întotdeauna destul de dezordonată. Pentru asistență între browsere, trebuie să folosim proprietăți specifice furnizorului. Cu toate acestea, cu mixins, poate fi foarte ușor. Să vedem că se întâmplă.

@mixin border-radius($radius){
   -webkit-border-radius   : $radius;
   -moz-border-radius      : $radius;
   -ms-border-radius       : $radius;
   border-radius           : $radius;
}
div{
   width    : $div-width;
   border   : 2px solid grey;
   @include border-radius(20px);
}

Aici am folosit @mixin directivă pentru a defini un mixin numit border-radius. Acest mixin conține toate proprietățile posibile pentru a seta raza unui chenar. De asemenea, am trecut un parametru acestui mixin. Ori de câte ori trebuie să setați raza unui element, includeți acest mixin cu @include cuvânt cheie.

Compilați din nou scriptul pentru a genera CSS. Cum arată acum?

//Processed CSS output
div {
   width: 500px;
   border: 2px solid grey;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   border-radius: 20px; 
}

Cuibărit

Elementele HTML au o structură logică asemănătoare copacului cu elemente imbricate. Pentru a scrie selectoare CSS structurate, CSS ar trebui să urmeze și unele cuiburi logice. Cu toate acestea, CSS nu acceptă cuibărirea.

Deoarece aveți Sass pe mașină, scrierea selectorilor CSS imbricate este o bucată de tort.

div{
   >h1{
      color: blue;
      &:hover{
         color: greenyellow;
      }
   }
}

Aici am folosit doi combinatori, > And &. Scopul unui combinator este de a explica relația dintre elemente. Exemplul nostru va aplica culoarea albastră pentru all h1 copii ai a element div. Un alt selector este selecția părinteor &. Utilizați acest selector pentru pseudo-clase precum hover, focus și activ.

Compilați încă o dată pentru a vedea blocurile CSS generate.

//Processed CSS output
div h1 {
   color: blue;
}
div h1:hover {
   color: greenyellow;
}

Moştenire:

Da – puteți utiliza cea mai populară funcție OOP din Sass. Acumularea proprietăților părintelui este moștenirea. Dar are vreun sens în CSS? Și le putem folosi? Noi putem! Credeți-mă și sunt sigur că veți adora această caracteristică.

Luați în considerare o aplicație în care aveți diferite tipuri de butoane. Salvați, Anulați și Renunțați pentru a numi câteva. Vă dați seama că împărtășesc majoritatea caracteristicilor lor. De exemplu, umplutura, dimensiunea fontului, marginea. Singura diferență este culoarea de fundal.

Miroase a moștenire? Da … Ai ghicit bine! Putem crea un stil părinte pentru toate aceste proprietăți comune și le putem folosi în blocuri copil.

%common-button{
   padding: 16px 8px;
   border: none;
   font-size: 18px;
}
.save{
   @extend %common-button;
   background-color: blue;
   color: white;
}
.cancel{
   @extend %common-button;
   background-color: goldenrod;
   color: white;
}

Aici save și cancel butoanele au moștenit proprietățile lor comune de la common-button clasă. Pentru a declara un stil părinte, utilizați % semn. Folosește @extend directivă de a moșteni un bloc copil.

Import

Am văzut multe caracteristici uimitoare pe care le oferă Sass. Am reușit să facem stilurile mai lizibile și structurate. Totuși, poate crește și deveni greu de întreținut.

Sass are și o soluție la această problemă: un fișier parțial. Un fișier parțial este o modalitate de a crea fișiere Sass modulare mici. Fișierul rădăcină Sass poate importa aceste fișiere modulare cu totul. Convenția de denumire pentru fișierele parțiale este de a prefixa numele fișierului cu un subliniat _.

1611470469 812 Sass un preprocesor pentru garniturile dvs de pe web
@import '_buttonpartial';
h1{
   color:blue;
}

Folosește @import directivă pentru a include un fișier parțial în scriptul Sass rădăcină.

Buclă

Iterarea este unul dintre cele mai frecvent utilizate mecanisme de programare. Scriptul Sass vă permite să iterați peste variabile. Puteți folosi diverse directive precum @for, @each și @while.

$totalButton: 2;
@for $i from 1 through $totalButton{
   .button-#{$i} {
      width: 50px * $i;
      height: 120px / $i;
   }
}

Blocul CSS generat va avea două clase cu stiluri diferite.

//Processed CSS output
.button-1 {
  width: 50px;
  height: 120px; }
.button-2 {
  width: 100px;
  height: 60px; }

Evitați repetarea – utilizați un robot de bucătărie

Un robot de bucătărie este un aparat de bucătărie folosit pentru a facilita sarcinile repetitive în prepararea alimentelor.

Am folosit un pachet Node.js pentru compilarea fișierelor Sass. Poate fi foarte enervant dacă trebuie să compilați de fiecare dată când faceți o modificare în scriptul Sass.

Există o modalitate elegantă de a evita compilarea repetitivă: o sarcină alergător. Visual Studio Code are un runner de sarcini încorporat, dar puteți utiliza orice runner de sarcini la alegere. Înghiţitură este un alt alergător de sarcini popular. Pentru a compila scriptul Sass cu Gulp, ai avea nevoie compilator gulp sass in schimb.

Avertizare! Sass este doar un instrument de dezvoltare. Evitați livrarea oricărei biblioteci sau fișiere asociate cu Sass. Nu ai avea niciodată nevoie de ele pe un server de producție.

Ce urmeaza

Am învățat cum să folosim preprocesoarele pentru a crea blocuri CSS eficiente și care pot fi întreținute. Am văzut diverse caracteristici Sass cu exemple. Pentru cunoștințe mai aprofundate, treceți la oficial site-ul web.

De asemenea, am creat un probă proiect. Continuați, clonați proiectul și începeți să jucați.