Topp 40 SASS-intervjufrågor och svar (2025)

Här är SASS- och SCSS-intervjufrågor och svar för nyblivna såväl som erfarna kandidater för att få sitt drömjobb.

1) Förklara vad Sass är? Hur kan den användas?

Sass står för Syntactically Awesome Stylesheets och skapades av Hampton Catlin. Det är en förlängning av CSS3, som lägger till kapslade regler, mixins, variabler, väljararv, etc.

Sass kan användas på tre sätt

Som ett kommandoradsverktyg
Som en fristående Ruby-modul
Som ett plugin för alla Rack-aktiverade ramverk

Gratis PDF-nedladdning: SASS-intervjufrågor och svar

2) Lista ut nyckelfunktionerna för Sass?

Nyckelfunktioner för Sass inkluderar

Fullständig CSS3-kompatibel
Språktillägg som kapsling, variabler och mixins
Många användbara funktioner för att manipulera färger och andra värden
Avancerade funktioner som kontrolldirektiv för bibliotek
Välformaterad, anpassningsbar utdata

3) Lista över de datatyper som SassScript stöder?

SassScript stöder sju huvuddatatyper

Siffror (t.ex. 1,5 ,10px)
Textsträngar (t.ex. "foo", "bar", etc.)
Färger (blå, #04a3f9)
Booleans (sant eller falskt)
Noll (t.ex. noll)
Lista över värden, separerade med mellanslag eller kommatecken (t.ex. 1.5 em, Arial, Helvetica etc.)
Mappar från ett värde till ett annat (t.ex. (nyckel 1: värde1, nyckel 2: värde 2))

4) Förklara hur man definierar en variabel i Sass?

Variabler i Sass börjar med ett ($) tecken och variabeltilldelning görs med ett kolon(:).

5) Förklara vad är skillnaden mellan Sass och SCSS?

Skillnaden mellan Sass och SCSS är att,

Sass är en CSS förprocessor med syntaxframsteg och en förlängning av CSS3
Sass har två syntaxer
Den första syntaxen är "SCSS" och den använder tillägget .scss
Den andra syntaxen är indragen syntax eller bara "Sass" och den använder tillägget .sass
Medan Sass har lös syntax med blanksteg och inga semikolon, påminner SCSS mer om CSS

Alla CSS-giltiga dokument kan konverteras till Sass genom att helt enkelt ändra tillägget från.CSS till.SCSS.

6) Vad används Selector Nesting i Sass till?

I Sass erbjuder väljarkapsling ett sätt för stilmallsförfattare att beräkna långa väljare genom att kapsla kortare väljare inom varandra.

7) Förklara vad en @extend-funktion används för i Sass?

I Sass erbjuder @EXTEND-direktivet ett enkelt sätt att tillåta en väljare att ärva stilarna från en annan. Den syftar till att tillhandahålla ett sätt för en väljare A att utöka stilarna från en väljare B. När du gör det kommer väljaren A att läggas till väljare B så att de båda delar samma deklarationer. @EXTEND förhindrar koduppsvällning genom att gruppera väljare som delar samma stil i en regel.

8) Förklara vad är användningen av @IMPORT-funktionen i Sass?

@IMPORT-funktionen i Sass

Utökar CSS-importregeln genom att aktivera import av SCSS- och Sass-filer
Alla importerade filer slås samman till en enda utmatad CSS-fil
Kan praktiskt taget mixa och matcha vilken fil som helst och vara säker på alla dina stilar
@IMPORT tar ett filnamn för att importera

9) Varför anses Sass vara bättre än LESS?

Saas låter dig skriva återanvändbara metoder och använda logiska uttalanden, t.ex. loopar och villkor.
Saas-användare kan komma åt Compass-biblioteket och använda några fantastiska funktioner som dynamisk sprite-kartgenerering, äldre webbläsarhack och stöd över webbläsare för CSS3-funktioner
Compass låter dig också lägga till ett externt ramverk som Blueprint, Foundation eller Bootstrap överst
I LESS kan du skriva en grundläggande logiksats med hjälp av en "guarded mixin", vilket motsvarar Sass if-satser
I LESS kan du gå igenom numeriska värden med hjälp av rekursiva funktioner medan Sass låter dig iterera alla typer av data
I Sass kan du skriva dina egna praktiska funktioner

10) Förklara vad är användningen av Mixin-funktionen i Sass? Vad är meningen med att torka ut en mixin?

Mixin låter dig definiera stilar som kan återanvändas i hela formatmallen utan att behöva ta till icke-semantiska klasser som .float-left.

Att torka ur en blandning innebär att dela upp den i dynamiska och statiska delar. Den dynamiska mixin är den som användaren faktiskt kommer att anropa, och den statiska mixin är den information som annars skulle dupliceras.

11) Förklara vad Sass Maps är och vad är användningen av Sass Maps?

Sass-karta är en strukturerad data på ett hierarkiskt sätt och inte bara ett gäng variabler. Det kan hjälpa till att organisera koden. Vissa stor användning av Sass är

Det är mycket användbart när du hanterar lager av element i ditt projekt
Det kan vara till hjälp vid färghantering när det finns en lång lista med olika färger och nyanser
Använd ikonkarta för olika sociala medier-ikoner, till exempel: facebook: '\e607' eller twitter: '\e602'
Till skillnad från andra programmeringsbibliotek kommer Sass map endast att bestå av kod som kommer att användas

12) Förklara hur Sass-kommentarer skiljer sig från vanliga CSS?

Syntax för kommentarer i vanlig CSS börjar med /* kommentarer...*/, medan det i SASS finns två typer av kommentarer, enkelradskommentarerna // och flerradiga CSS-kommentarer med /* */.

13) Stöder Sass inline-kommentarer?

Enradskommentarer // kommer att tas bort av .scss-förbehandlaren och kommer inte att visas i din .css-fil

Medan kommentaren */ är giltig CSS och kommer att bevaras mellan översättningen från .scss till din .css-fil

14) Hur används interpolation i Sass?

I Sass kan du definiera ett element i en variabel och interpolera det inuti Sass-koden. Det är användbart när du har dina moduler i separata filer.

15) Förklara när kan du använda %platshållarna i Sass?

%platshållare i Sass är användbart när du vill skriva stilar som var avsedda att utökas, men du vill inte att basstilarna ska synas i utdata CSS-stilar

16) Är det möjligt att kapsla variabler inom variabler i Sass?

Interpolering av variabelnamn är för närvarande inte möjlig i Sass. Du kan dock använda interpolation av platshållare.

17) Vilka är Sass nackdelar och fördelar?

Fördelar:

Sass är lätt att lära sig speciellt för dem som har en bakgrund av Python, Ruby eller Coffescript och plats med funktioner, skriva mixins
CSS kan enkelt konverteras till Sass
Under hela projektet behöver du inte upprepa liknande CSS-satser med @extend-attributet
Det gör det möjligt att definiera variabler som är användbara genom hela projektet
Det håller ditt responsiva projekt mer organiserat

Nackdelar:

Kräver tid för att lära sig nya funktioner i förprocessorn innan den används
Du kanske inte kan använda den inbyggda elementinspektörsfunktionen i webbläsaren
Felsökning kan vara svårt

18) Förklara vad som är MINDRE?

LESS är ett språk som producerar dynamiskt stilmall. LESS är en CSS-förprocessor och utökar CSS med dynamiskt beteende. Det tillåter variabler, mixins, operationer och funktioner. LESS körs på både serversidan och klientsidan.

19) Förklara hur man skapar en LESS-fil och var man lagrar den och kompilerar den?

Att skapa eller lagra LESS-fil liknar att skapa/lagra CSS-fil. En ny LESS-fil kan skapas med filändelsen .less, eller så kan du byta namn på befintlig .css-fil till .less-fil. Du kan skriva MINDRE kod med befintlig CSS-kod.

Det bästa sättet att skapa det i mappen ~/content/ eller ~/Styles/

20) På vilka sätt kan LESS användas?

Via npm kan LESS användas på kommandoraden
Ladda ner som en skriptfil för webbläsaren
För verktyg från tredje part används det

21) Hur variabel representeras i LESS?

LESS tillåter att variabler definieras. I LESS representeras variabeln som @sing. Medan variabeltilldelning görs med en: (kolon) sing. Variablernas värden infogas i CSS-utdatafilen såväl som minifierad fil.

22) Förklara hur Mixins är användbart?

Mixins gör det möjligt att bädda in alla egenskaper för en klass i en annan klass genom att inkludera klassnamnet som en av dess egenskaper. Det är precis som variabler men för hela klasser.

23) Förklara hur du kan ställa in kod i ett klockläge när du kör LESS.js i en HTML5 webbläsare?

Om du kör LESS.js i en HTML5-webbläsare kommer den att använda lokal lagring för att cachelagra den genererade CSS. Men från utvecklarens synvinkel kan de inte se ändringarna de gjorde omedelbart. För att se dina ändringar direkt kan du ladda program i utvecklings- och tittarläge genom att följa JavaScript

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) Förklara vad är innebörden av kapsla i LESS programmering?

Kapsling i LESS är klustring av uttalanden inuti andra satser, så det bildar en grupp av relaterad kod. Med andra ord när vi lägger till ett kodavsnitt och lägger till ytterligare en kod inuti det, då kallas det kodavsnittet kapsling.

25) Nämn vilka är färgkanalfunktionerna som används i LESS?

nyans
mättnad
hsvhue
mättnad
hswalue
röd
grön
blå
alfa
luma
luminans

26) Förklara vad är data-uri i LESS?

I CSS är Data URI:er en av de bästa teknikerna, det tillåter utvecklare att undvika externa bildreferenser och istället bädda in dem direkt i en stilmall. Data-URI är det utmärkta sättet att minska HTTP-förfrågningar

27) Förklara vad "Källkarta Mindre Inline"?

Alternativet "Source Map Less Inline" indikerar att vi bör inkludera alla CSS-filer i källkartan. Vilket innebär att du bara behöver din kartfil för att komma till din ursprungliga källa.

28) Förklara vad är användningen av Extend "all" i LESS?

När du anger alla nyckelord sist i ett förlängningsargument säger det till LESS att matcha den väljaren som en del av en annan väljare.

29) Förklara vad "StrictImports" är i LESS?

strictImports styr om kompilatorn tillåter en @import inuti antingen @mediablock eller andra väljarblock

30) Lista ut skillnaderna mellan LESS och Sass?

Varje stilmallsspråk är bra i deras perspektiv och användning; men det finns få skillnader i deras användning.

MINDRE	sass
– LESS använder JavaScript och bearbetas på klientsidan	– Sass är kodad i Ruby och bearbetas därmed till serversidan
– Variabelnamn inleds med @-symbolen	– Variabelnamn inleds med symbolen $
– LESS ärver inte flera väljare med en uppsättning egenskaper	– Sass ärver flera väljare med en uppsättning egenskaper
– LESS fungerar inte med "okända" enheter och returnerar inte syntaxfelmeddelanden för inkompatibla enheter eller matematikrelaterade syntaxfel	– Sass låter dig arbeta med "okända" enheter returnerar också ett syntaxfelmeddelande för inkompatibla enheter

31) Vilka är likheterna mellan LESS och Sass?

Mellan LESS och Sass finns likheterna

namnutrymmen
Färgfunktioner
Mixins och parametriska mixins
Kapningsmöjligheter
JavaScript-utvärderingar

32) Förklara vad är användningen av &combinator?

&combinator sammanfogar kapslad väljare med den överordnade väljaren. Det är användbart för Pseudo-klasser som :hover och :focus

33) Förklara vad är användningen av operationer i LESS?

Operationer kan användas för att utföra funktioner som

Enkla matematiska operatorer: +, – , *, /
Färgfunktioner
Matematiska funktioner
Vilken storlek eller färgvariabel som helst kan användas

34) Förklara vad är användningen av Escape?

Användningen av att fly i LESS

När du behöver mata ut CSS som inte är giltig CSS-syntax
Proprietär syntax känns inte igen av LESS
LESS kompilatorn ger ett felmeddelande om den inte används
Enkelt prefix med ~-symbol och sätt inom citattecken

35) Vad innehåller LESS elements?

Mindre element innehåller vanliga mixins som

.lutning
.avrundad
.opacitet
.box-skugga
.inre-skugga

36) Lista upp alternativ mot LESS?

SASS: Syntaktiskt fantastiska stilmallar
SCSS: Version.2 av SASS
Skrivstiftet

37) Förklara hur du kan anropa kompilatorn från kommandoraden?

Du kan anropa kompilatorn från kommandoraden i LESS as

$ lessc styles.less

Detta kommer att mata ut den kompilerade CSS till stdout; du kan sedan omdirigera den till en fil som du väljer

$ lessc styles.less > styles.css

38) Vad är användningen av e () funktion?

Med hjälp av e()-funktionen kan du escape ett värde så att det går rakt igenom till den kompilerade CSS, utan att uppmärksammas av LESS-kompilatorn.

39) Förklara hur du kan förkompilera LESS till CSS?

För att förkompilera LESS till CSS kan du använda

Kör less.js med Node.js: Genom att använda Node.js JavaScript-ramverket kan du köra less.js-skriptet utanför webbläsaren
Använd lessphp: För implementering av LESS-kompilatorn skriven i PHP, används lessphp
Använd onlinekompilator: Använd onlinekompilator för snabb kompilering av LESS-kod utan att installera en kompilator
Mindre. app (för Mac-användare): Less.app är ett gratis verktyg för Mac-användare, det här verktyget kompilerar dem automatiskt till CSS-filer

40) Förklara hur merge-funktionen används i LESS?

För att aggregera värden från flera egenskaper till en blankstegs- eller kommaseparerad lista under en enskild egenskap används LESS. Det är användbart för egenskaper som transformering och bakgrund

41) Hur kan man skapa en loopstruktur i LESS?

En mixin kan kalla sig LESS. Sådana rekursiva mixins, när de kombineras med Pattern matching och Guard Expressions, kan användas för att skapa olika iterativa/loopstrukturer.

42) Varför behöver vi parametriska mixins i LESS?

Parametriska blandningar är samma som standardblandningar. Den enda skillnaden är att parametriska mixins tar parametrar som funktioner i JavaScript. Efter att ha bestämt parametrar till mixinerna får du mer kontroll över mixins.