Top 40 de întrebări și răspunsuri la interviu SASS (2025)

Iată întrebările și răspunsurile la interviurile SASS și SCSS pentru studenții, precum și candidații cu experiență pentru a obține jobul visat.

1) Explicați ce este Sass? Cum poate fi folosit?

Sass înseamnă Syntactically Awesome Stylesheets și a fost creat de Hampton Catlin. Este o extensie a CSS3, adăugând reguli imbricate, mixuri, variabile, moștenire selector etc.

Sass poate fi folosit în trei moduri

Ca instrument de linie de comandă
Ca un modul Ruby independent
Ca plugin pentru orice cadru compatibil Rack

Descărcare PDF gratuită: Întrebări și răspunsuri la interviu SASS

2) Enumerați caracteristicile cheie pentru Sass?

Caracteristicile cheie pentru Sass includ

Compatibil complet cu CSS3
Extensii de limbaj, cum ar fi imbricarea, variabilele și mixurile
Multe funcții utile pentru manipularea culorilor și a altor valori
Caracteristici avansate precum directivele de control pentru biblioteci
Ieșire bine formatată, personalizabilă

3) Enumerați tipurile de date pe care le acceptă SassScript?

SassScript acceptă șapte tipuri principale de date

Numere (de ex.; 1,5 ,10px)
Șiruri de texte (de exemplu, „foo”, „bar” etc.)
Culori (albastru, #04a3f9)
Booleeni (adevărat sau fals)
Nule (de exemplu, nule)
Listă de valori, separate prin spațiu sau virgule (de ex., 1.5em, Arial, Helvetica etc.)
Hărți de la o valoare la alta (de ex., ( cheia 1: valoarea 1, cheia 2: valoarea 2))

4) Explicați cum să definiți o variabilă în Sass?

Variabilele din Sass încep cu semnul ($), iar atribuirea variabilelor se face cu două puncte (:).

5) Explicați care este diferența dintre Sass și SCSS?

Diferența dintre Sass și SCSS este că,

Sass este un CSS pre-procesor cu progrese de sintaxă și o extensie a CSS3
Sass are două sintaxe
Prima sintaxă este „SCSS” și folosește extensia .scss
Cealaltă sintaxă este sintaxă indentată sau doar „Sass” și folosește extensia .sass
În timp ce Sass are sintaxă liberă cu spațiu alb și fără punct și virgulă, SCSS seamănă mai mult cu CSS

Orice document valid CSS poate fi convertit în Sass prin simpla schimbare a extensiei de la.CSS la.SCSS.

6) Pentru ce se folosește Selector Nesting în Sass?

În Sass, imbricarea selectorului oferă o modalitate pentru autorii foilor de stil de a calcula selectoare lungi prin imbricarea selectoare mai scurte unul în celălalt.

7) Explicați pentru ce este folosită o funcție @extend în Sass?

În Sass, directiva @EXTEND oferă o modalitate simplă de a permite unui selector să moștenească stilurile altuia. Acesta își propune să ofere o modalitate pentru un selector A de a extinde stilurile de la un selector B. Când face acest lucru, selectorul A va fi adăugat la selectorul B, astfel încât ambii împărtășesc aceleași declarații. @EXTEND previne umflarea codului prin gruparea selectoarelor care împărtășesc același stil într-o singură regulă.

8) Explicați care este utilizarea funcției @IMPORT în Sass?

Funcția @IMPORT în Sass

Extinde regula de import CSS prin activarea importului fișierelor SCSS și Sass
Toate fișierele importate sunt îmbinate într-un singur fișier CSS
Poate amesteca și potrivește practic orice fișier și să fii sigur de toate stilurile tale
@IMPORT ia un nume de fișier pentru a importa

9) De ce Sass este considerat mai bun decât LESS?

Saas vă permite să scrieți metode reutilizabile și să utilizați instrucțiuni logice, de exemplu, bucle și condiționale
Utilizatorul Saas poate accesa biblioteca Compass și poate folosi unele caracteristici extraordinare, cum ar fi generarea dinamică a hărților sprite, hack-uri vechi de browser și suport pentru mai multe browsere pentru funcțiile CSS3
Compass vă permite, de asemenea, să adăugați un cadru extern, cum ar fi Blueprint, Foundation sau Bootstrap deasupra
În LESS, puteți scrie o instrucțiune logică de bază folosind un „mixin protejat”, care este echivalent cu instrucțiunile Sass if
În LESS, puteți parcurge valorile numerice folosind funcții recursive, în timp ce Sass vă permite să repetați orice tip de date
În Sass, vă puteți scrie propriile funcții utile

10) Explicați care este utilizarea funcției Mixin în Sass? Care este semnificația DRY-ing out a mixin?

Mixin vă permite să definiți stiluri care pot fi reutilizate în toată foaia de stil fără a fi nevoie să recurgeți la clase non-semantice precum .float-left.

USCAREA dintr-un amestec înseamnă împărțirea acestuia în părți dinamice și statice. Mixin-ul dinamic este cel pe care utilizatorul îl va apela de fapt, iar mixin-ul static este informațiile care altfel ar fi duplicate.

11) Explicați ce este Sass Maps și la ce folosește Sass Maps?

Harta Sass este o dată structurată într-un mod ierarhic și nu doar o grămadă de variabile. Poate ajuta la organizarea codului. O bună utilizare a lui Sass sunt

Este foarte util atunci când aveți de-a face cu straturi de elemente din proiectul dvs
Poate fi util în gestionarea culorilor atunci când există o listă lungă de culori și nuanțe diferite
Utilizați harta pictogramelor pentru diverse pictograme de rețele sociale, de exemplu: facebook: „\e607” sau twitter: „\e602”
Spre deosebire de alte biblioteci de programare, harta Sass va consta doar din cod care va fi folosit

12) Explicați cum sunt diferite comentariile Sass față de CSS obișnuit?

Sintaxa pentru comentarii în CSS obișnuit începe cu /* comentarii...*/, în timp ce în SASS există două tipuri de comentarii, comentariile cu o singură linie // și comentariile CSS cu mai multe linii cu /* */.

13) Sass acceptă comentariile inline?

Comentariile pe o singură linie // vor fi eliminate de pre-procesorul .scss și nu vor apărea în fișierul dvs. .css

În timp ce comentariile */ sunt CSS valide și vor fi păstrate între traducerea din .scss în fișierul dvs. .css

14) Cum se utilizează interpolarea în Sass?

În Sass, puteți defini un element într-o variabilă și îl puteți interpola în codul Sass. Este util atunci când vă păstrați modulele în fișiere separate.

15) Explicați când puteți utiliza % substituenți în Sass?

% substituenți în Sass sunt folositori atunci când doriți să scrieți stiluri care au fost menite să fie extinse, dar nu doriți ca stilurile de bază să fie văzute în stilurile CSS de ieșire

16) Este posibil să imbricați variabile în cadrul variabilelor în Sass?

Interpolarea numelor de variabile nu este posibilă în prezent în Sass. Cu toate acestea, puteți utiliza interpolarea substituenților.

17) Care sunt dezavantajele și avantajele Sass?

Pro-uri:

Sass este ușor de învățat, mai ales pentru cei care au un fundal în Python, Ruby sau Coffescript și plasează folosind funcții, scriind mixuri
CSS poate fi ușor convertit în Sass
Pe parcursul proiectului, nu trebuie să repetați instrucțiuni CSS similare folosind atributul @extend
Permite definirea variabilelor care sunt utilizabile pe parcursul întregului proiect
Îți menține proiectul receptiv mai organizat

Contra:

Necesită timp pentru a învăța noi caracteristici ale preprocesorului înainte de utilizare
Este posibil să nu puteți utiliza funcția încorporată de inspector de elemente din browser
Depanarea poate fi dificilă

18) Explicați ce este LESS?

LESS este un limbaj dinamic care produce foi de stil. LESS este un pre-procesoare CSS și extinde CSS cu un comportament dinamic. Permite variabile, mixuri, operații și funcții. LESS rulează atât pe partea server, cât și pe partea client.

19) Explicați cum să creați fișierul LESS și unde să îl stocați și să îl compilați?

Crearea sau stocarea fișierului LESS este similară cu crearea/stocarea fișierului CSS. Un nou fișier LESS poate fi creat cu o extensie .less sau puteți redenumi fișierul .css existent în fișierul .less. Puteți scrie mai puțin cod cu codul CSS existent.

Cel mai bun mod de a-l crea în folderul ~/content/ sau ~/Styles/

20) În ce moduri poate fi folosit LESS?

Via npm LESS poate fi folosit pe linia de comandă
Descărcați ca fișier script pentru browser
Pentru instrumente terțe, acesta este utilizat

21) Cât de variabilă este reprezentată în LESS?

LESS permite definirea variabilelor. În LESS, variabila este reprezentată ca @sing. În timp ce, atribuirea variabilelor se face cu: (coloană) sing. Valorile variabilelor sunt inserate în fișierul de ieșire CSS, precum și în fișierul minimizat.

22) Explicați cum este util Mixins?

Mixinurile permit încorporarea tuturor proprietăților unei clase într-o altă clasă prin includerea numelui clasei ca una dintre proprietățile sale. Este la fel ca variabilele, dar pentru clase întregi.

23) Explicați cum puteți seta codul într-un mod ceas când rulați LESS.js într-un HTML5 browser?

Dacă rulați LESS.js într-un browser HTML5, acesta va folosi stocarea locală pentru a stoca în cache CSS-ul generat. Cu toate acestea, din punctul de vedere al dezvoltatorului, aceștia nu pot vedea modificările pe care le-au făcut instantaneu. Pentru a vedea modificările instantaneu, puteți încărca programul în modul dezvoltare și vizionare urmând JavaScript

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) Explicați care este sensul cuibării în programarea LESS?

Imbricarea în LESS este gruparea de instrucțiuni în interiorul altor instrucțiuni, deci formează un grup de cod înrudit. Cu alte cuvinte, atunci când adăugăm un fragment de cod și adăugăm un alt cod în interiorul acestuia, atunci acel fragment de cod se numește imbricare.

25) Menționați care sunt funcțiile canalului de culoare utilizate în LESS?

nuanţă
saturaţie
hsvhue
saturaţie
hswalue
roșu
verde
albastru
alfa
Luma
luminanță

26) Explicați ce este data-uri în LESS?

În CSS, URI-urile de date este una dintre cele mai bune tehnici, le permite dezvoltatorilor să evite referirea la imagini externe și, în schimb, să le încorporeze direct într-o foaie de stil. URI-urile de date sunt modalitatea excelentă de a reduce solicitările HTTP

27) Explicați ce „Harta sursă mai puțin în linie”?

Opțiunea „Harta sursă mai puțin în linie” indică faptul că ar trebui să includem toate fișierele CSS în harta sursă. Ceea ce înseamnă că aveți nevoie doar de fișierul de hartă pentru a ajunge la sursa originală.

28) Explicați la ce folosește Extend „toate” în LESS?

Când specificați ultimul cuvânt cheie într-un argument extins, acesta îi spune LESS să se potrivească cu acel selector ca parte a altui selector.

29) Explicați ce este „StrictImports” în LESS?

StrictImports controlează dacă compilatorul va permite un @import în interiorul fie al blocurilor @media, fie al altor blocuri selectoare

30) Enumerați diferențele dintre LESS și Sass?

Fiecare limbaj al foii de stil este bun în perspectiva și utilizarea lor; cu toate acestea, există puține diferențe în utilizarea lor.

MAI PUȚIN	Sass
– LESS folosește JavaScript și este procesat la nivelul clientului	– Sass este codificat în Ruby și astfel procesat pe partea serverului
– Numele variabilelor sunt prefațate cu simbolul @	– Numele variabilei este prefațat cu simbolul $
– LESS nu moștenește mai mulți selectori cu un singur set de proprietăți	– Sass moștenește mai mulți selectori cu un singur set de proprietăți
– LESS nu funcționează cu unități „necunoscute” și nici nu returnează o notificare de eroare de sintaxă pentru unități incompatibile sau eroare de sintaxă legată de matematică	– Sass vă permite să lucrați cu unități „necunoscute”, de asemenea, returnează o notificare de eroare de sintaxă pentru unitățile incompatibile

31) Care sunt asemănările dintre LESS și Sass?

Între LESS și Sass asemănările sunt

namespace
Funcții de culoare
Mixine și mixine parametrice
Capacități de cuibărire
Evaluări JavaScript

32) Explicați ce folosește &combinator?

&combinatorul concatenează selectorul imbricat cu selectorul părinte. Este util pentru clase Pseudo precum :hover și :focus

33) Explicați care este utilizarea operațiunilor din LESS?

Operațiile pot fi folosite pentru a efectua funcții precum

Operatori matematici simpli: +, – , *, /
Funcții de culoare
Funcții matematice
Se poate opera orice dimensiune sau culoare variabilă

34) Explicați la ce folosește Evadarea?

Utilizarea evadării în LESS

Când trebuie să scoateți CSS, aceasta nu este o sintaxă CSS validă
Sintaxa proprie nu este recunoscută de LESS
Compilatorul LESS va arunca o eroare dacă nu este folosit
Prefix simplu cu simbolul ~ și pus între ghilimele

35) Ce conține elemente LESS?

Mai puține elemente conțin mixine utilizate în mod obișnuit, cum ar fi

.gradient
.rotunjit
.opacitate
.cutie-umbra
.umbră-interioară

36) Enumerați alternative împotriva LESS?

SASS: Foi de stil sintactic minunate
SCSS: Versiunea.2 a SASS
Stylus

37) Explicați cum puteți invoca compilatorul din linia de comandă?

Puteți invoca compilatorul din linia de comandă în LESS ca

$ mai puţin stiluri.mai puţin

Aceasta va scoate CSS-ul compilat către stdout; apoi îl puteți redirecționa către un fișier la alegere

$ lessc styles.less > styles.css

38) La ce folosește funcția e ()?

Cu ajutorul funcției e() puteți evada o valoare, astfel încât aceasta să treacă direct în CSS-ul compilat, fără a fi observat de compilatorul LESS.

39) Explicați cum puteți precompila LESS în CSS?

Pentru a precompila LESS în CSS puteți folosi

Rulați less.js folosind Node.js : prin utilizarea cadrului JavaScript Node.js puteți rula scriptul less.js în afara browserului
Utilizați lessphp: Pentru implementarea compilatorului LESS scris în PHP, se folosește lessphp
Utilizați compilatorul online: utilizați compilatorul online pentru compilarea rapidă a codului LESS fără a instala un compilator
Mai puțin. aplicație (pentru utilizatorii de Mac): Less.app este un instrument gratuit pentru utilizatorii de Mac, acest instrument le compilează automat în fișiere CSS

40) Explicați cum este utilizată funcția de îmbinare în LESS?

Pentru agregarea valorilor din mai multe proprietăți într-o listă separată de spațiu sau virgulă sub o singură proprietate, se folosește LESS. Este util pentru proprietăți precum transformarea și fundalul

41) Cum poți crea structuri bucle în LESS?

Un mixin se poate numi în LESS. Astfel de mixuri recursive, atunci când sunt combinate cu potrivirea modelelor și expresii de gardă, pot fi folosite pentru a crea diferite structuri iterative/buclă.

42) De ce avem nevoie de mixine parametrice în LESS?

Mixinele parametrice sunt la fel ca mixinele standard. Singura diferență este că mixurile parametrice preiau parametri precum funcțiile în JavaScript. După determinarea parametrilor mixin-urilor, obțineți mai mult control asupra mixin-urilor.