Top 40 SASS-interviewspørgsmål og -svar (2025)

Her er SASS- og SCSS-interviewspørgsmål og -svar til friskere såvel som erfarne kandidater til at få deres drømmejob.

1) Forklar, hvad er Sass? Hvordan kan det bruges?

Sass står for Syntactically Awesome Stylesheets og blev skabt af Hampton Catlin. Det er en udvidelse af CSS3, der tilføjer indlejrede regler, mixins, variabler, vælgerarv osv.

Sass kan bruges på tre måder

Som et kommandolinjeværktøj
Som et selvstændigt Ruby-modul
Som et plugin til enhver Rack-aktiveret framework

Gratis PDF-download: SASS-interviewspørgsmål og -svar

2) Liste over de vigtigste funktioner for Sass?

Nøglefunktioner til Sass inkluderer

Fuld CSS3-kompatibel
Sprogudvidelser såsom indlejring, variabler og mixins
Mange nyttige funktioner til at manipulere farver og andre værdier
Avancerede funktioner som kontroldirektiver til biblioteker
Velformateret output, der kan tilpasses

3) Liste over de datatyper, som SassScript understøtter?

SassScript understøtter syv hoveddatatyper

Tal (f.eks. 1,5 ,10px)
Strenge af tekster (f.eks. "foo", "bar" osv.)
Farver (blå, #04a3f9)
Booleansk (sandt eller falsk)
Nuller (f.eks; null)
Liste over værdier, adskilt af mellemrum eller kommaer (f.eks. 1.5 em, Arial, Helvetica osv.)
Korter fra én værdi til en anden (f.eks. (nøgle 1: værdi1, nøgle 2: værdi 2))

4) Forklar hvordan man definerer en variabel i Sass?

Variabler i Sass begynder med et ($) tegn, og variabeltildeling udføres med et kolon(:).

5) Forklar hvad der er forskellen mellem Sass og SCSS?

Forskellen mellem Sass og SCSS er, at

Sass er en CSS pre-processor med syntaksfremskridt og en udvidelse af CSS3
Sass har to syntakser
Den første syntaks er "SCSS", og den bruger .scss-udvidelsen
Den anden syntaks er indrykket syntaks eller bare "Sass", og den bruger .sass-udvidelsen
Mens Sass har løs syntaks med mellemrum og ingen semikolon, minder SCSS mere om CSS

Ethvert CSS-gyldigt dokument kan konverteres til Sass ved blot at ændre udvidelsen fra.CSS til.SCSS.

6) Hvad bruges Selector Nesting i Sass til?

I Sass tilbyder vælgerindlejring en måde for typografiarkforfattere at beregne lange vælgere ved at indlejre kortere vælgere inden i hinanden.

7) Forklar hvad en @extend funktion bruges til i Sass?

I Sass giver @EXTEND-direktivet en enkel måde at tillade en vælger at arve en andens stilarter. Det har til formål at give en vælger A en måde at udvide stilene fra en vælger B. Når du gør det, vil vælgeren A blive tilføjet til vælger B, så de begge deler de samme erklæringer. @EXTEND forhindrer kodeblæsning ved at gruppere vælgere, der deler den samme stil, i én regel.

8) Forklar, hvad er brugen af @IMPORT-funktionen i Sass?

@IMPORT-funktionen i Sass

Udvider CSS-importreglen ved at aktivere import af SCSS- og Sass-filer
Alle importerede filer flettes til en enkelt output CSS-fil
Kan næsten mixe og matche enhver fil og være sikker på alle dine stilarter
@IMPORT tager et filnavn for at importere

9) Hvorfor anses Sass for at være bedre end MINDRE?

Saas giver dig mulighed for at skrive genanvendelige metoder og bruge logiske sætninger, f.eks. loops og conditionals
Saas-brugere kan få adgang til Compass-biblioteket og bruge nogle fantastiske funktioner som dynamisk sprite-kortgenerering, ældre browserhack og understøttelse af CSS3-funktioner på tværs af browsere
Compass giver dig også mulighed for at tilføje en ekstern ramme som Blueprint, Foundation eller Bootstrap På toppen
I LESS kan du skrive en grundlæggende logisk sætning ved hjælp af en 'guarded mixin', som svarer til Sass if-sætninger
I LESS kan du gå gennem numeriske værdier ved hjælp af rekursive funktioner, mens Sass giver dig mulighed for at iterere enhver form for data
I Sass kan du skrive dine egne praktiske funktioner

10) Forklar, hvad er brugen af Mixin-funktionen i Sass? Hvad er meningen med at udtørre en blanding?

Mixin giver dig mulighed for at definere stilarter, der kan genbruges i hele stilarket uden at skulle ty til ikke-semantiske klasser som .float-left.

Udtørring af en blanding betyder at opdele den i dynamiske og statiske dele. Det dynamiske mixin er det, som brugeren rent faktisk vil kalde, og det statiske mixin er de oplysninger, der ellers ville blive duplikeret.

11) Forklar, hvad Sass Maps er, og hvad er brugen af Sass Maps?

Sass map er en struktureret data på en hierarkisk måde og ikke kun en masse variable. Det kan hjælpe med at organisere koden. Nogle stor brug af Sass er

Det er meget nyttigt, når du skal håndtere lag af elementer i dit projekt
Det kan være nyttigt i farvestyring, når der er lang række forskellige farver og nuancer
Brug ikonkort til forskellige sociale medieikoner, f.eks.: facebook: '\e607' eller twitter: '\e602'
I modsætning til andre programmeringsbiblioteker vil Sass map kun bestå af kode, der skal bruges

12) Forklar, hvordan Sass-kommentarer er forskellige fra almindelig CSS?

Syntaks for kommentarer i almindelig CSS starter med /* kommentarer…*/, mens der i SASS er to typer kommentarer, enkeltlinjekommentarerne // og flerlinjede CSS-kommentarer med /* */.

13) Understøtter Sass indlejrede kommentarer?

Enkeltlinjekommentarer // fjernes af .scss-forbehandleren og vises ikke i din .css-fil

Mens kommentaren */ er gyldig CSS, og vil blive bevaret mellem oversættelsen fra .scss til din .css-fil

14) Hvordan bruges interpolation i Sass?

I Sass kan du definere et element i en variabel og interpolere det inde i Sass-koden. Det er nyttigt, når du opbevarer dine moduler i separate filer.

15) Forklar, hvornår kan du bruge %pladsholderne i Sass?

%pladsholdere i Sass er nyttige, når du vil skrive stilarter, der var beregnet til at blive udvidet, men du ikke ønsker, at basisstilene skal ses i output CSS-stile

16) Er det muligt at indlejre variabler i variable i Sass?

Interpolation af variabelnavne er ikke mulig i øjeblikket i Sass. Du kan dog bruge interpolation af pladsholdere.

17) Hvad er Sass ulemper og fordele?

FORDELE:

Sass er let at lære, især for dem, der har en baggrund af Python, Ruby eller Coffescript og sted ved hjælp af funktioner, skrivning af mixins
CSS kan nemt konverteres til Sass
Gennem hele projektet behøver du ikke at gentage lignende CSS-sætninger ved hjælp af @extend-attribut
Det giver mulighed for at definere variabler, der er brugbare gennem hele projektet
Det holder dit responsive projekt mere organiseret

ULEMPER:

Kræver tid til at lære de nye funktioner i præprocessoren før brug
Du kan muligvis ikke bruge den indbyggede elementinspektør-funktion i browseren
Fejlfinding kan være svært

18) Forklar, hvad der er MINDRE?

LESS er et dynamisk stilarkproducerende sprog. LESS er en CSS pre-processor og udvider CSS med dynamisk adfærd. Det giver mulighed for variabler, mixins, operationer og funktioner. LESS kører både på serversiden og klientsiden.

19) Forklar hvordan man opretter MINDRE fil, og hvor man gemmer den og kompilerer den?

Oprettelse eller lagring af MINDRE fil svarer til at oprette/lagre CSS-fil. En ny LESS-fil kan oprettes med filtypenavnet .less, eller du kan omdøbe eksisterende .css-fil til .less-fil. Du kan skrive MINDRE kode med eksisterende CSS-kode.

Den bedste måde at skabe det i ~/content/ eller ~/Styles/ mappe

20) På hvilke måder kan LESS bruges?

Via npm kan LESS bruges på kommandolinjen
Download som en script-fil til browseren
Til tredjepartsværktøjer bruges det

21) Hvor variabel er repræsenteret i LESS?

LESS gør det muligt at definere variabler. I LESS er variablen repræsenteret som @sing. Mens variabel tildeling udføres med en: (kolon) sing. Værdierne af variablerne indsættes i CSS-outputfilen samt minificerede fil.

22) Forklar, hvordan Mixins er nyttigt?

Mixins gør det muligt at indlejre alle egenskaberne for en klasse i en anden klasse ved at inkludere klassenavnet som en af dens egenskaber. Det er ligesom variabler, men for hele klasser.

23) Forklar, hvordan du kan indstille kode i en urtilstand, når du kører LESS.js i en HTML5 browser?

Hvis du kører LESS.js i en HTML5-browser, vil den bruge lokal lagring til at cache den genererede CSS. Fra udviklerens synspunkt kan de dog ikke se de ændringer, de har foretaget med det samme. For at se dine ændringer med det samme, kan du indlæse program i udviklings- og se-tilstand ved at følge JavaScript

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) Forklar hvad meningen med nesting er i MINDRE programmering?

Indlejring i LESS er klynging af udsagn inde i andre udsagn, så det danner en gruppe af relateret kode. Med andre ord, når vi tilføjer et kodestykke og tilføjer en anden kode i det, så kaldes det kodestykke nesting.

25) Nævn hvilke farvekanalfunktioner der bruges i LESS?

nuance
mætning
hsvhue
mætning
hswalue
rød
grøn
i blå
alpha
luma
luminans

26) Forklar, hvad er data-uri i LESS?

I CSS er Data URI'er en af de bedste teknikker, det giver udviklere mulighed for at undgå ekstern billedhenvisning og i stedet integrere dem direkte i et stylesheet. Data-URI'er er den fremragende måde at reducere HTTP-anmodninger på

27) Forklar hvad "Kildekort mindre inline"?

Indstillingen "Kildekort mindre inline" angiver, at vi skal inkludere alle CSS-filerne i kildekortet. Hvilket betyder, at du kun behøver din kortfil for at komme til din originale kilde.

28) Forklar, hvad er brugen af Extend "all" i LESS?

Når du angiver alle søgeord sidst i et udvider-argument, fortæller det MINDRE at matche denne vælger som en del af en anden vælger.

29) Forklar hvad "StrictImports" er i LESS?

strictImports kontrollerer, om compileren vil tillade en @import inde i enten @medieblokke eller andre vælgerblokke

30) Liste over forskellene mellem LESS og Sass?

Hvert stilarkssprog er godt i deres perspektiv og brug; dog er der få forskelle i deres brug.

MINDRE	frækt
– LESS bruger JavaScript og behandles på klientsiden	– Sass er kodet i Ruby og behandles dermed til server-side
– Variablenavne indledes med @-symbolet	– Variabelnavn indledes med $-symbol
– LESS arver ikke flere vælgere med ét sæt egenskaber	– Sass arver flere vælgere med ét sæt egenskaber
– LESS virker ikke med "ukendte" enheder, og det returnerer heller ikke syntaksfejlmeddelelse for inkompatible enheder eller matematikrelaterede syntaksfejl	- Sass giver dig mulighed for at arbejde med "ukendte" enheder returnerer også en syntaksfejlmeddelelse for inkompatible enheder

31) Hvad er lighederne mellem LESS og Sass?

Mellem LESS og Sass er lighederne

Namespaces
Farve funktioner
Mixins og parametriske mixins
Indlejringsevner
JavaScript-evalueringer

32) Forklar, hvad er brugen af &combinator?

&combinator sammenkæder indlejret vælger med den overordnede vælger. Det er nyttigt til Pseudo-klasser såsom :hover og :focus

33) Forklar, hvad er brugen af operationer i LESS?

Operationer kan bruges til at udføre funktioner som f.eks

Simple matematiske operatorer: +, – , *, /
Farve funktioner
Matematiske funktioner
Enhver størrelse eller farvevariabel kan betjenes

34) Forklar, hvad er brugen af Escaping?

Brugen af at undslippe i LESS

Når du skal udlæse CSS, er det ikke gyldig CSS-syntaks
Proprietær syntaks genkendes ikke af LESS
LESS compiler vil give en fejl, hvis den ikke bruges
Simpelt præfiks med ~-symbol og sat i anførselstegn

35) Hvad indeholder LESS elementer?

Færre elementer indeholder almindeligt anvendte mixins som

.gradient
.afrundet
.opacitet
.kasse-skygge
.indre-skygge

36) Opremser alternativer mod LESS?

SASS: Syntaktisk fantastiske stylesheets
SCSS: Version.2 af SASS
Stylus

37) Forklar hvordan du kan kalde compileren fra kommandolinjen?

Du kan kalde compileren fra kommandolinjen i LESS as

$ lessc styles.less

Dette vil udlæse den kompilerede CSS til stdout; du kan derefter omdirigere den til en fil efter eget valg

$ lessc styles.less > styles.css

38) Hvad er brugen af e () funktion?

Ved hjælp af e()-funktionen kan du undslippe en værdi, så den går direkte igennem til den kompilerede CSS, uden at blive bemærket af LESS-kompileren.

39) Forklar hvordan du kan prækompilere MINDRE til CSS?

For at prækompilere MINDRE til CSS kan du bruge

Kør less.js ved hjælp af Node.js: Ved at bruge Node.js JavaScript-rammeværket kan du køre less.js-scriptet uden for browseren
Brug lessphp: Til implementering af LESS compileren skrevet i PHP, bruges lessphp
Brug online compiler: Brug online compiler til hurtig kompilering af MINDRE kode uden at installere en compiler
Mindre. app (til Mac-brugere): Less.app er et gratis værktøj til Mac-brugere, dette værktøj kompilerer dem automatisk til CSS-filer

40) Forklar hvordan flettefunktionen bruges i LESS?

Til at aggregere værdier fra flere egenskaber til en mellemrums- eller kommasepareret liste under en enkelt egenskab bruges MINDRE. Det er nyttigt til egenskaber såsom transformation og baggrund

41) Hvordan kan du skabe en loop strukturer i LESS?

En mixin kan kalde sig MINDRE. Sådanne rekursive mixins kan, når de kombineres med Pattern Matching og Guard Expressions, bruges til at skabe forskellige iterative/loop-strukturer.

42) Hvorfor har vi brug for parametriske mixins i LESS?

Parametriske blandinger er de samme som standardblandinger. Den eneste forskel er, at parametriske mixins tager parametre som funktioner i JavaScript. Efter at have bestemt parametre til mixins, får du mere kontrol over mixins.