Sass

Dezambiguizare - Dacă sunteți în căutarea sitului arheologic din Trento, consultați Spațiul arheologic subteran din Sas .

Sass (S yntactically A wesome S tyle S heets) este un CSS extensie de limbaj , care vă permite să utilizați variabile , de a crea funcții și de a organiza foaia de stil în mai multe fișiere .

Limbajul Sass se bazează pe conceptul de preprocesor CSS, care este utilizat pentru a defini foile de stil cu o formă mai simplă, mai completă și mai puternică decât CSS și pentru a genera fișiere CSS optimizate, agregând structurile definite chiar și într-un mod complex. Este compatibil cu toate versiunile CSS.

Sass este format din două sintaxe ^[2] . Sintaxa originală, numită „sintaxă indentată”, folosește o sintaxă similară cu Html. Utilizați indentarea pentru a separa blocurile de cod și caracterele de linie nouă pentru a separa regulile. Sintaxa mai nouă, „SCSS” (Sassy CSS), folosește formatarea blocurilor ca cea a CSS. Utilizați paranteze cretate pentru a indica blocuri de cod și punct și virgulă pentru a separa regulile dintr-un bloc. Sintaxa indentată și fișierele SCSS au în mod tradițional extensiile .sass și respectiv .scss.

CSS3 constă dintr-o serie de selectoare și pseudo-selectoare care grupează regulile care se aplică acestora. Sass (în contextul mai larg al ambelor sintaxe) extinde CSS furnizând mai multe mecanisme care sunt disponibile în limbaje de programare mai tradiționale, în special limbaje orientate obiect, dar care nu sunt disponibile pentru CSS3 în sine. Când SassScript este interpretat, acesta creează blocuri de reguli CSS pentru diferiți selectori, așa cum sunt definiți de fișierul Sass. Interpretul Sass traduce SassScript în CSS. Alternativ, Sass poate monitoriza fișierul .sass sau .scss și îl poate traduce într-un fișier .css de ieșire de fiecare dată când fișierul .sass sau .scss este salvat ^[3] .

Sintaxa indentată este un limbaj metalic. SCSS este un metalimbaj imbricat, deoarece CSS valid este SCSS valid cu aceeași semantică.

SassScript oferă următoarele mecanisme: variabile, cuibărire, mixin și moștenire selector ^[4] .

Instalare

Implementarea originală Sass a fost scrisă în Ruby. Odată ce Ruby a fost instalat pentru sistemul dvs. de operare, puteți continua instalarea Sass utilizând comanda gem install sass .

Începând cu 26 martie 2019, Ruby Sass nu mai este susținut oficial ^[5] . Cu toate acestea, implementările Sass există în diferite limbaje de programare, iar implementarea primară a devenit cea scrisă în Dart ^[6] . Instrucțiunile de instalare sunt disponibile pe pagina oficială Sass pentru fiecare implementare.

Istorie

Sass a fost proiectat inițial de Hampton Catlin și dezvoltat de Natalie Weizenbaum. După versiunile sale inițiale, Weizenbaum ^[7] și Chris Eppstein au continuat să extindă Sass cu SassScript, un limbaj de scriptare utilizat în fișierele Sass.

Principalele implementări

SassScript a fost implementat în mai multe limbi, implementări notabile sunt:

• Implementarea inițială open source Ruby creată în 2006, ^{[8] a fost} apoi depreciată din cauza lipsei întreținătorilor și a ajuns la sfârșitul vieții în martie 2019 ^[9] .
• Implementarea oficială a programului open source Dart ^[10] .
• libSass, implementarea oficială open source C ++.
• implementarea oficială JavaScript, publicată ca un modul "sass" pe npm.
• JSass, o implementare Java neoficială ^[11] .
• phamlp, o implementare SASS / SCSS neoficială în PHP ^[12] .
• Vaadin are o implementare Java a Sass.
• Firebug, o extensie XUL („moștenită”) pentru Firefox pentru dezvoltare web. ^[13] De atunci a fost depreciată în favoarea instrumentelor pentru dezvoltatori integrate în Firefox în sine. A încetat să funcționeze de când Firefox 57 a renunțat la suportul pentru extensiile XUL.

Caracteristici

Variabile

Sass vă permite să definiți variabile. Variabilele încep cu un semn de dolar ( $ ). Atribuirea variabilă se face cu două puncte ( : ) ^[14] .

SassScript acceptă patru tipuri de date:

• Numere (inclusiv unități)
• Șiruri (cu sau fără ghilimele)
• Culori (nume sau nume)
• Booleeni

Variabilele pot fi argumente sau rezultate ale uneia dintre mai multe funcții disponibile. ^[15] În timpul traducerii, valorile variabile sunt inserate în documentul CSS de ieșire ^[16] .

 $ primar-culoare: # 3bbfce;
$ marjă: 16 px;

.content-navigation {
  border-color: $ primar-color;
  culoare: întunecați ($ culoare primară, 10%);
}

.border {
  umplutură: $ margin / 2;
  margin: $ margin / 2;
  border-color: $ primar-color;
}

$ primar-culoare: # 3bbfce
$ marjă: 16 px

.content-navigation
  border-color: $ primar-color
  culoare: întunecați ($ culoare primară, 10%)

.frontieră
  umplutură: $ margin / 2
  margin: $ margin / 2
  border-color: $ primar-color

.content-navigation {
  border-color: # 3bbfce;
  culoare: # 2b9eab;
}

.border {
  umplutură: 8 px;
  margine: 8px;
  border-color: # 3bbfce;
}

Cuibărit

CSS acceptă cuibărirea logică, dar blocurile de cod în sine nu sunt cuibărite. Sass vă permite să introduceți codul imbricat unul în celălalt ^[17] .

 table.hl {
  marja: 2em 0;
  td.ln {
    text-align: dreapta;
  }
}

Acolo {
  font: {
    familie: serif;
    greutate: îndrăzneață;
    dimensiune: 1.3em;
  }
}

masa.hl 
  marja: 2em 0
  td.ln 
    text-align: dreapta

Acolo 
  font: 
    familie: serif
    greutate: îndrăzneață
    dimensiune: 1.3em

table.hl {
  marja: 2em 0;
}
table.hl td.ln {
  text-align: dreapta;
}

Acolo {
  font-family: serif;
  font-weight: bold;
  dimensiunea fontului: 1.3em;
}

Tipuri mai complicate de cuibărire, inclusiv cuibărirea spațiului de nume și referințele părinte, sunt discutate în documentația Sass ^[18] .

 @mixin table-base {
  a {
    text-align: centru;
    font-weight: bold;
  }
  td, th {
    umplutură: 2 px;
  }
}

#Data {
  @includeți baza de masă;
}

= masa-baza
  a
    text-align: centru
    font-weight: bold
  td, th
    umplutură: 2 px

#Data
  + bază-masă

#data data {
  text-align: centru;
  font-weight: bold;
}
#data td, #data th {
  umplutură: 2 px;
}

Buclă

Sass permite iterația asupra variabilelor folosind @for , @each și @while , care pot fi utilizate pentru a aplica stiluri diferite elementelor cu clase sau ID-uri similare.

 $ pătrat Număr: 4
@pentru $ i de la 1 la $ squareCount 
  #square - # {$ i} 
   culoare de fundal: roșu
   lățime: 50px * $ i
   înălțime: 120px / $ i

# pătrat-1 {
  culoare de fundal: roșu;
  lățime: 50px;
  înălțime: 120px;
}

# pătrat-2 {
  culoare de fundal: roșu;
  lățime: 100px;
  înălțime: 60px;
}

# pătrat-3 {
  culoare de fundal: roșu;
  lățime: 150px;
  înălțime: 40px;
}

Subiecte

Mixins susțin, de asemenea, argumentele ^[19] .

 = stânga ($ dist) 
  plutește la stânga
  margin-stânga: $ dist

#Data 
  + stânga (10 px)

#Data {
  plutește la stânga;
  margine-stânga: 10px;
}

In combinatie

 = bază de masă
  a
    text-align: centru
    font-weight: bold
  td, th 
    umplutură: 2 px

= stânga ($ dist) 
  plutește la stânga
  margin-stânga: $ dist

#Data 
  + stânga (10 px)
  + bază-masă

#Data {
  plutește la stânga;
  margine-stânga: 10px;
}
#data data {
  text-align: centru;
  font-weight: bold;
}
#data td, #data th {
  umplutură: 2 px;
}

Moștenirea selectorului

Deși CSS3 acceptă ierarhia Document Object Model (DOM), nu permite moștenirea selectorului. În Sass, moștenirea se realizează prin inserarea unei linii într-un bloc de cod care utilizează cuvântul cheie @extend și face referire la un alt selector. Atributele extinse ale selectorului se aplică selectorului apelant ^[20] .

 .eroare
  chenar: 1px # f00
  fundal: #fdd

.error.intruziune 
  dimensiunea fontului: 1.3em
  font-weight: bold

.badError 
  @extend .error
  lățimea chenarului: 3 px

.error, .badError {
  chenar: 1px # f00;
  fundal: #fdd;
}

.error.intrusion,
.badError.intrusion {
  dimensiunea fontului: 1.3em;
  font-weight: bold;
}

.badError {
  lățimea chenarului: 3 px;
}

Sass acceptă moștenirea multiplă. ^[21] .

libSass

La Conferința pentru dezvoltatori HTML5 din 2012, Hampton Catlin, creatorul Sass, a anunțat versiunea 1.0 a libSass, o implementare open source C ++ a Sass dezvoltată de Catlin, Aaron Leung și echipa de ingineri Moovweb ^[22] . actualul întreținător al Sass, Chris Eppstein, și-a exprimat intenția de a contribui.

Potrivit Catlin, libSass poate fi "drop [ped] în orice și va include Sass ... Puteți să-l lăsați direct în Firefox astăzi și să compilați Firefox și se va compila acolo. Am scris analizorul nostru de la zero pentru a ne asigura că este posibil „ ^[23] .

Obiectivele de proiectare ale LibSass sunt:

• Performanță: dezvoltatorii au raportat creșteri de viteză de 10 ori mai rapide decât implementarea Ruby a Sass ^[24] .
• Integrare mai ușoară: libSass facilitează integrarea Sass în mai multe software-uri. Înainte de libSass, integrarea lui Sass într-o limbă sau un produs software a necesitat gruparea întregului interpret Ruby. În schimb, libSass este o bibliotecă care poate fi legată static, cu zero dependențe externe și o interfață de tip C, ceea ce face ușor să înfășurați Sass direct în alte limbaje și instrumente de programare. De exemplu, acum există linkuri libSass open source pentru Node, Go și Ruby ^[25] .
• Compatibilitate: obiectivul libSass este compatibilitatea deplină cu implementarea oficială Ruby a Sass. Acest lucru a fost realizat în libsass 3.3 ^[26] .

Integrare IDE

Notă

Elemente conexe

• MAI PUȚIN

linkuri externe

• Site oficial (engleză)
• Ghid Sass pe html.it (italiană)
• Tutorial Sass la w3schools.com (engleză)

Portal internet : accesați intrările Wikipedia care se ocupă de internet