Top 40 pitanja i odgovora za SASS intervju (2025.)

Ovdje su pitanja i odgovori na razgovorima za SASS i SCSS za brucoše kao i za iskusne kandidate koji će dobiti posao iz snova.

1) Objasnite što je Sass? Kako se može koristiti?

Sass je kratica za Syntactically Awesome Stylesheets, a kreirao ga je Hampton Catlin. To je proširenje CSS3, dodaje ugniježđena pravila, miksine, varijable, nasljeđivanje selektora itd.

Sass se može koristiti na tri načina

Kao alat naredbenog retka
Kao samostalni Ruby modul
Kao dodatak za bilo koji okvir koji podržava Rack

Besplatno preuzimanje PDF-a: Pitanja i odgovori za SASS intervju

2) Navedite ključne značajke za Sass?

Ključne značajke za Sass uključuju

Potpuna kompatibilnost s CSS3
Jezična proširenja kao što su gniježđenje, varijable i mixins
Mnoge korisne funkcije za manipuliranje bojama i drugim vrijednostima
Napredne značajke poput kontrolnih direktiva za knjižnice
Dobro formatiran, prilagodljiv izlaz

3) Navedite vrste podataka koje SassScript podržava?

SassScript podržava sedam glavnih tipova podataka

Brojevi (npr.; 1,5 ,10px)
Nizovi teksta (npr., "foo", 'bar', itd.)
Boje (plava, #04a3f9)
Booleovi (točno ili netočno)
Null (npr.; null)
Popis vrijednosti, odvojenih razmakom ili zarezima (npr., 1.5em, Arial, Helvetica itd.)
Preslikava iz jedne vrijednosti u drugu (npr. (ključ 1: vrijednost1, ključ 2: vrijednost 2))

4) Objasnite kako definirati varijablu u Sass-u?

Varijable u Sass-u počinju znakom ($), a dodjeljivanje varijabli vrši se dvotočkom (:).

5) Objasnite koja je razlika između Sass-a i SCSS-a?

Razlika između Sass-a i SCSS-a je u tome što

Sass je a CSS pretprocesor s poboljšanjima u sintaksi i proširenjem CSS3
Sass ima dvije sintakse
Prva sintaksa je "SCSS" i koristi ekstenziju .scss
Druga sintaksa je uvučena sintaksa ili samo "Sass" i koristi ekstenziju .sass
Dok Sass ima labavu sintaksu s razmakom i bez točke-zareza, SCSS više sliči CSS-u

Svaki valjani CSS dokument može se pretvoriti u Sass jednostavnom promjenom ekstenzije iz .CSS u .SCSS.

6) Za što se koristi Selector Nesting u Sass-u?

U Sass-u, ugniježđivanje selektora nudi način za autore tablica stilova da izračunaju dugačke selektore ugniježđujući kraće selektore jedan u drugi.

7) Objasnite za što se koristi funkcija @extend u Sass-u?

U Sass-u, direktiva @EXTEND pruža jednostavan način da selektoru omogući nasljeđivanje stilova drugog. Cilj mu je pružiti način da selektor A proširi stilove iz selektora B. Pritom će selektor A dodati selektoru B tako da oba dijele iste deklaracije. @EXTEND sprječava napuhavanje koda grupiranjem birača koji dijele isti stil u jedno pravilo.

8) Objasnite koja je upotreba funkcije @IMPORT u Sass-u?

Funkcija @IMPORT u Sass-u

Proširuje pravilo uvoza CSS-a omogućavanjem uvoza SCSS i Sass datoteka
Sve uvezene datoteke spajaju se u jednu izlaznu CSS datoteku
Može virtualno kombinirati i uskladiti bilo koju datoteku i biti siguran u sve svoje stilove
@IMPORT uzima naziv datoteke za uvoz

9) Zašto se Sass smatra boljim od LESS?

Saas vam omogućuje pisanje metoda za višekratnu upotrebu i korištenje logičkih iskaza, npr. petlji i uvjeta
Saas korisnik može pristupiti biblioteci Compass i koristiti neke sjajne značajke kao što su dinamičko generiranje sprite mapa, naslijeđeni preglednik i podrška za više preglednika za CSS3 značajke
Compass vam također omogućuje dodavanje vanjskog okvira kao što su Blueprint, Foundation ili Bootstrap na vrhu
U LESS-u možete napisati osnovnu logičku izjavu koristeći 'guarded mixin', što je ekvivalentno Sass if izjavama
U LESS-u možete kružiti kroz numeričke vrijednosti koristeći rekurzivne funkcije dok vam Sass omogućuje ponavljanje bilo koje vrste podataka
U Sassu možete napisati vlastite praktične funkcije

10) Objasnite čemu služi funkcija Mixin u Sass-u? Koje je značenje DRY-ing-out miksina?

Mixin vam omogućuje definiranje stilova koji se mogu ponovno koristiti u cijeloj tablici stilova bez potrebe za korištenjem nesemantičkih klasa poput .float-left.

DRY-out iz miksanja znači njegovo dijeljenje na dinamične i statične dijelove. Dinamički mixin je onaj koji će korisnik zapravo pozvati, a statički mixin su dijelovi informacija koji bi se inače duplicirali.

11) Objasnite što su Sass Maps i čemu služe Sass Maps?

Sass mapa je strukturiran podatak na hijerarhijski način, a ne samo hrpa varijabli. Može pomoći u organiziranju koda. Neke od izvrsnih upotreba Sass-a su

Vrlo je korisno kada radite sa slojevima elemenata u vašem projektu
Može biti od pomoći u upravljanju bojama kada postoji dugačak popis različitih boja i nijansi
Koristite kartu ikona za razne ikone društvenih medija, na primjer: facebook: '\e607' ili twitter: '\e602'
Za razliku od drugih programskih biblioteka, Sass map će se sastojati samo od koda koji će se koristiti

12) Objasnite kako se Sass komentari razlikuju od običnog CSS-a?

Sintaksa za komentare u redovnom CSS-u počinje s /* komentari…*/, dok u SASS-u postoje dvije vrste komentara, jednoredni komentari // i višeredni CSS komentari s /* */.

13) Podržava li Sass ugrađene komentare?

Komentari u jednom retku // bit će uklonjeni od strane .scss predprocesora i neće se pojaviti u vašoj .css datoteci

Dok je komentar */ važeći CSS i bit će sačuvan između prijevoda iz .scss u vašu .css datoteku

14) Kako se interpolacija koristi u Sass-u?

U Sass-u možete definirati element u varijabli i interpolirati ga unutar Sass koda. Korisno je kada svoje module držite u zasebnim datotekama.

15) Objasnite kada možete koristiti %placeholders u Sass-u?

%placeholders u Sass-u je korisno kada želite pisati stilove koji su trebali biti prošireni, ali ne želite da se osnovni stilovi vide u izlaznim CSS stilovima

16) Je li moguće ugnijezditi varijable unutar varijabli u Sass-u?

Interpolacija naziva varijabli trenutno nije moguća u Sass-u. Međutim, možete koristiti interpolaciju rezerviranih mjesta.

17) Koje su mane i prednosti Sass-a?

Prozodija:

Sass je lako naučiti, posebno za one koji poznaju Python, Ruby ili Coffescript i koriste funkcije, pišu miksine
CSS se lako može pretvoriti u Sass
Tijekom projekta ne morate ponavljati slične CSS izjave koristeći @extend atribut
Omogućuje definiranje varijabli koje se mogu koristiti tijekom cijelog projekta
Održava vaš responzivni projekt organiziranijim

Cons:

Potrebno je vrijeme za učenje novih značajki predprocesora prije korištenja
Možda nećete moći koristiti ugrađenu značajku preglednika elemenata
Rješavanje problema može biti teško

18) Objasnite što je MANJE?

LESS je jezik za izradu dinamičkih listova stilova. LESS je CSS pretprocesor i proširuje CSS dinamičkim ponašanjem. Omogućuje varijable, miksine, operacije i funkcije. LESS radi i na strani poslužitelja i na strani klijenta.

19) Objasnite kako kreirati LESS datoteku i gdje je pohraniti i prevesti?

Stvaranje ili pohranjivanje LESS datoteke slično je stvaranju/pohranjivanju CSS datoteke. Nova LESS datoteka može se stvoriti s nastavkom .less ili možete preimenovati postojeću .css datoteku u .less datoteku. Možete napisati MANJE koda s postojećim CSS kodom.

Najbolji način za stvaranje unutar mape ~/content/ ili ~/Styles/

20) Na koje se načine LESS može koristiti?

Putem npm-a LESS se može koristiti u naredbenom retku
Preuzmite kao datoteku skripte za preglednik
Za alate treće strane koristi se

21) Kako je varijabla predstavljena u LESS?

LESS omogućuje definiranje varijabli. U LESS, varijabla je predstavljena kao @sing. Dok se dodjela varijabli vrši s: (dvotačka) sing. Vrijednosti varijabli umetnute su u CSS izlaznu datoteku kao i u umanjenu datoteku.

22) Objasnite kako je Mixins koristan?

Mixini omogućuju ugradnju svih svojstava klase u drugu klasu uključivanjem naziva klase kao jednog od njezinih svojstava. To je kao varijable, ali za cijele klase.

23) Objasnite kako možete postaviti kod u modu promatranja kada pokrenete LESS.js u HTML5 preglednik?

Ako pokrenete LESS.js u HTML5 pregledniku, on će koristiti lokalnu pohranu za predmemoriju generiranog CSS-a. Međutim, sa stajališta programera, oni ne mogu odmah vidjeti promjene koje su napravili. Kako biste odmah vidjeli svoje promjene, možete učitati program u razvojnom i promatračkom modu prateći JavaScript

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) Objasnite što je značenje gniježđenja u LESS programiranju?

Ugniježđenje u LESS je grupiranje izjava unutar drugih izjava, tako da tvori grupu povezanog koda. Drugim riječima, kada dodamo isječak koda i dodamo drugi kod unutar njega, tada se taj isječak koda naziva gniježđenje.

25) Navedite koje se funkcije kanala boja koriste u LESS-u?

nijansa
zasićenje
hsvhue
zasićenje
hswale
crvena
zelena
plava
alfa
Luma
osvjetljenje

26) Objasnite što je data-uri u LESS-u?

U CSS-u, URI podataka jedna je od najboljih tehnika, omogućuje programerima da izbjegnu vanjsko referenciranje slika i umjesto toga ih ugrade izravno u tablicu stilova. Podatkovni URI-ji izvrstan su način za smanjenje HTTP zahtjeva

27) Objasnite što je "manje ugrađeno mapiranje izvora"?

Opcija “Source Map Less Inline” označava da bismo trebali uključiti sve CSS datoteke u izvornu kartu. Što znači da vam je potrebna samo datoteka mape da biste došli do izvornog izvora.

28) Objasnite čemu služi Extend “all” u LESS?

Kada navedete sve ključne riječi posljednje u argumentu proširenja, govori LESS da odgovara tom selektoru kao dijelu drugog selektora.

29) Objasnite što je "StrictImports" u LESS-u?

strictImports kontrolira hoće li kompajler dopustiti @import unutar blokova @media ili drugih blokova selektora

30) Navedite razlike između LESS i Sass?

Svaki stilski jezik je dobar u svojoj perspektivi i upotrebi; međutim postoji nekoliko razlika u njihovoj uporabi.

MANJE	Sas
– LESS koristi JavaScript i obrađuje se na strani klijenta	– Sass je kodiran u Rubyju i stoga se obrađuje na strani poslužitelja
– Imena varijabli prethode simbolu @	– Nazivu varijable prethodi simbol $
– LESS ne nasljeđuje više selektora s jednim skupom svojstava	– Sass nasljeđuje više selektora s jednim skupom svojstava
– LESS ne radi s "nepoznatim" jedinicama niti vraća obavijest o sintaktičkoj pogrešci za nekompatibilne jedinice ili sintaktičku pogrešku povezanu s matematikom	– Sass vam omogućuje rad s "nepoznatim" jedinicama i vraća obavijest o sintaktičkoj pogrešci za nekompatibilne jedinice

31) Koje su sličnosti između LESS i Sass?

Između LESS i Sass sličnosti postoje

imenskom prostoru
Funkcije boja
Miksini i parametarski miksini
Mogućnosti gniježđenja
JavaScript evaluacije

32) Objasnite čemu služi &combinator?

&combinator povezuje ugniježđeni selektor s nadređenim selektorom. Koristan je za pseudo klase kao što su :hover i :focus

33) Objasnite čemu služe operacije u LESS-u?

Operacije se mogu koristiti za izvođenje funkcija kao što su

Jednostavni matematički operatori: +, – , *, /
Funkcije boja
Matematičke funkcije
Može se raditi na bilo kojoj varijabli veličine ili boje

34) Objasnite čemu služi Escaping?

Upotreba bježanja u LESS

Kada trebate ispisati CSS koji nije važeća CSS sintaksa
LESS ne prepoznaje vlasničku sintaksu
LESS kompajler će izbaciti pogrešku ako se ne koristi
Jednostavni prefiks sa simbolom ~ i stavljanje u navodnike

35) Što sadrži MANJE elemenata?

Manje elemenata sadrži uobičajene miksine poput

.gradijent
.zaokružen
.neprozirnost
.kutija-sjena
.unutarnja-sjena

36) Navedite alternative protiv LESS?

SASS: sintaktički izvrsne tablice stilova
SCSS: verzija 2 SASS-a
Gramofonska igla

37) Objasnite kako možete pozvati prevoditelj iz naredbenog retka?

Možete pozvati kompajler iz naredbenog retka u LESS as

$ manje stilova. manje

Ovo će izvesti kompilirani CSS u stdout; tada ga možete preusmjeriti na datoteku po vašem izboru

$ lessc styles.less > styles.css

38) Čemu služi funkcija e ()?

Uz pomoć funkcije e() možete izbjeći vrijednost tako da ona prođe ravno kroz kompajlirani CSS, a da je LESS kompilator ne primijeti.

39) Objasnite kako možete unaprijed kompajlirati LESS u CSS?

Za prethodno kompajliranje LESS-a u CSS možete koristiti

Pokrenite less.js koristeći Node.js : korištenjem Node.js JavaScript okvira možete pokrenuti less.js skriptu izvan preglednika
Koristite lessphp: Za implementaciju LESS prevoditelja napisanog u PHP-u koristi se lessphp
Koristite mrežni kompajler: koristite mrežni kompajler za brzo kompiliranje LESS koda bez instaliranja prevoditelja
Manje. aplikacija (za Mac korisnike): Less.app je besplatan alat za Mac korisnike, ovaj ih alat automatski kompajlira u CSS datoteke

40) Objasnite kako se funkcija spajanja koristi u LESS?

Za agregiranje vrijednosti iz više svojstava u razmak ili popis odvojen zarezom pod jednim svojstvom koristi se LESS. Korisno je za svojstva kao što su transformacija i pozadina

41) Kako možete stvoriti strukture petlje u LESS-u?

Mixin može sam sebe pozvati u LESS. Takvi rekurzivni miksini, u kombinaciji s podudaranjem uzorka i zaštitnim izrazima, mogu se koristiti za stvaranje različitih iterativnih struktura/struktura petlje.

42) Zašto su nam potrebni parametarski miksini u LESS-u?

Parametarski miksini isti su kao standardni miksini. Jedina je razlika u tome što parametarski mixini uzimaju parametre poput funkcija u JavaScriptu. Nakon određivanja parametara miksinima, dobivate veću kontrolu nad miksinima.