Topp 40 SASS-intervjuspørsmål og -svar (2025)

Her er SASS- og SCSS-intervjuspørsmål og svar for ferskinger så vel som erfarne kandidater for å få drømmejobben.

1) Forklar hva er Sass? Hvordan kan det brukes?

Sass står for Syntactically Awesome Stylesheets og ble laget av Hampton Catlin. Det er en utvidelse av CSS3, som legger til nestede regler, mixins, variabler, velgerarv, etc.

Sass kan brukes på tre måter

Som et kommandolinjeverktøy
Som en frittstående Ruby-modul
Som en plugin for ethvert Rack-aktivert rammeverk

Gratis PDF-nedlasting: SASS-intervjuspørsmål og svar

2) Liste over nøkkelfunksjonene for Sass?

Nøkkelfunksjoner for Sass inkluderer

Full CSS3-kompatibel
Språkutvidelser som nesting, variabler og mixins
Mange nyttige funksjoner for å manipulere farger og andre verdier
Avanserte funksjoner som kontrolldirektiver for biblioteker
Godt formatert, tilpassbar utgang

3) Liste over datatypene som SassScript støtter?

SassScript støtter syv hoveddatatyper

Tall (f.eks. 1,5 ,10 piksler)
Tekststrenger (f.eks. "foo", "bar" osv.)
Farger (blå, #04a3f9)
boolske (sant eller usant)
Null (f.eks; null)
Liste over verdier, atskilt med mellomrom eller komma (f.eks. 1.5 em, Arial, Helvetica osv.)
Kart fra én verdi til en annen (f.eks. (nøkkel 1: verdi1, nøkkel 2: verdi 2))

4) Forklar hvordan man definerer en variabel i Sass?

Variabler i Sass begynner med et ($) tegn og variabeltilordning gjøres med kolon(:).

5) Forklar hva som er forskjellen mellom Sass og SCSS?

Forskjellen mellom Sass og SCSS er at,

Sass er en CSS pre-prosessor med syntaksfremskritt og en utvidelse av CSS3
Sass har to syntakser
Den første syntaksen er "SCSS", og den bruker utvidelsen .scss
Den andre syntaksen er innrykket syntaks eller bare "Sass", og den bruker .sass-utvidelsen
Mens Sass har løs syntaks med mellomrom og ingen semikolon, ligner SCSS mer på CSS

Ethvert CSS-gyldig dokument kan konverteres til Sass ved ganske enkelt å endre utvidelsen fra.CSS til.SCSS.

6) Hva brukes Selector Nesting i Sass til?

I Sass tilbyr velgernesting en måte for stilarkforfattere å beregne lange velgere ved å legge kortere velgere i hverandre.

7) Forklar hva en @extend-funksjon brukes til i Sass?

I Sass gir @EXTEND-direktivet en enkel måte å tillate en velger å arve stilene til en annen. Den tar sikte på å gi en selektor A en måte å utvide stilene fra en selektor B. Når du gjør det, vil velgeren A bli lagt til i selektor B slik at de begge deler de samme erklæringene. @EXTEND forhindrer kodeoppblåsthet ved å gruppere velgere som deler samme stil i én regel.

8) Forklar hva som er bruken av @IMPORT-funksjonen i Sass?

@IMPORT-funksjonen i Sass

Utvider CSS-importregelen ved å aktivere import av SCSS- og Sass-filer
Alle importerte filer blir slått sammen til en enkelt utgitt CSS-fil
Kan praktisk talt mikse og matche enhver fil og være sikker på alle stilene dine
@IMPORT tar et filnavn for å importere

9) Hvorfor regnes Sass som bedre enn MINDRE?

Saas lar deg skrive gjenbrukbare metoder og bruke logiske setninger, f.eks. loops og conditionals
Saas-brukere kan få tilgang til Compass-biblioteket og bruke noen fantastiske funksjoner som dynamisk sprite-kartgenerering, eldre nettleserhack og støtte for CSS3-funksjoner på tvers av nettlesere
Compass lar deg også legge til et eksternt rammeverk som Blueprint, Foundation eller Bootstrap på toppen
I LESS kan du skrive en grunnleggende logikksetning ved å bruke en 'bevoktet blanding', som tilsvarer Sass if-setninger
I LESS kan du gå gjennom numeriske verdier ved å bruke rekursive funksjoner mens Sass lar deg iterere alle typer data
I Sass kan du skrive dine egne praktiske funksjoner

10) Forklar hva er bruken av Mixin-funksjonen i Sass? Hva er meningen med å tørke ut en blanding?

Mixin lar deg definere stiler som kan gjenbrukes i hele stilarket uten å måtte ty til ikke-semantiske klasser som .float-left.

Tørking av en blanding betyr å dele den opp i dynamiske og statiske deler. Den dynamiske mixin er den som brukeren faktisk kommer til å ringe, og den statiske mixin er informasjonsbitene som ellers ville blitt duplisert.

11) Forklar hva Sass Maps er og hva er bruken av Sass Maps?

Sass-kart er strukturerte data på en hierarkisk måte og ikke bare en haug med variabler. Det kan hjelpe med å organisere koden. Noen stor bruk av Sass er

Det er veldig nyttig når du arbeider med lag med elementer i prosjektet ditt
Det kan være nyttig i fargebehandling når det er en lang liste med forskjellige farger og nyanser
Bruk ikonkart for ulike sosiale medier-ikoner, for eksempel: facebook: '\e607' eller twitter: '\e602'
I motsetning til andre programmeringsbiblioteker, vil Sass-kartet kun bestå av kode som skal brukes

12) Forklar hvordan Sass-kommentarer er forskjellige fra vanlig CSS?

Syntaks for kommentarer i vanlig CSS starter med /* kommentarer…*/, mens det i SASS er to typer kommentarer, enkeltlinjekommentarene // og flerlinjede CSS-kommentarer med /* */.

13) Støtter Sass innebygde kommentarer?

Enkeltlinjekommentarer // vil bli fjernet av .scss-forbehandleren og vil ikke vises i .css-filen din

Mens kommentaren */ er gyldig CSS, og vil bli bevart mellom oversettelsen fra .scss til .css-filen din

14) Hvordan brukes interpolasjon i Sass?

I Sass kan du definere et element i en variabel og interpolere det inne i Sass-koden. Det er nyttig når du oppbevarer modulene dine i separate filer.

15) Forklar når kan du bruke %plassholderne i Sass?

%plassholdere i Sass er nyttig når du vil skrive stiler som var ment å utvides, men du ikke vil at basisstilene skal vises i utdata-CSS-stiler

16) Er det mulig å neste variable innenfor variabler i Sass?

Interpolering av variabelnavn er for øyeblikket ikke mulig i Sass. Du kan imidlertid bruke interpolering av plassholdere.

17) Hva er Sass ulemper og fordeler?

Pros:

Sass er lett å lære spesielt for dem som har bakgrunn fra Python, Ruby eller Coffescript og plasserer ved å bruke funksjoner, skrive mixins
CSS kan enkelt konverteres til Sass
Gjennom hele prosjektet trenger du ikke å gjenta lignende CSS-setninger ved å bruke @extend-attributtet
Den lar deg definere variabler som er brukbare gjennom hele prosjektet
Det holder det responsive prosjektet ditt mer organisert

Ulemper:

Krever tid til å lære nye funksjoner i forprosessor før bruk
Du kan kanskje ikke bruke den innebygde elementinspektørfunksjonen i nettleseren
Feilsøking kan være vanskelig

18) Forklar hva som er MINDRE?

LESS er et dynamisk stilarkproduserende språk. LESS er en CSS pre-prosessor og utvider CSS med dynamisk oppførsel. Det tillater variabler, mixins, operasjoner og funksjoner. LESS kjører både på serversiden og klientsiden.

19) Forklar hvordan man lager MINDRE fil og hvor man lagrer den og kompilerer den?

Å lage eller lagre MINDRE fil ligner på å lage/lagre CSS-fil. En ny LESS-fil kan opprettes med filtypen .less, eller du kan endre navn på eksisterende .css-fil til .less-fil. Du kan skrive MINDRE kode med eksisterende CSS-kode.

Den beste måten å lage den på i mappen ~/content/ eller ~/Styles/

20) På hvilke måter kan LESS brukes?

Via npm kan LESS brukes på kommandolinjen
Last ned som en skriptfil for nettleseren
For tredjepartsverktøy brukes det

21) Hvordan variabel er representert i LESS?

LESS lar variabler defineres. I LESS er variabelen representert som @sing. Mens variabel tildeling gjøres med en: (kolon) sing. Verdiene til variablene settes inn i CSS-utdatafilen så vel som minifisert fil.

22) Forklar hvordan Mixins er nyttig?

Mixins gjør det mulig å bygge inn alle egenskapene til en klasse i en annen klasse ved å inkludere klassenavnet som en av egenskapene. Det er akkurat som variabler, men for hele klasser.

23) Forklar hvordan du kan sette kode i en klokkemodus når du kjører LESS.js i en HTML5 nettleser?

Hvis du kjører LESS.js i en HTML5-nettleser, vil den bruke lokal lagring til å bufre den genererte CSS-en. Fra utviklerens synspunkt kan de imidlertid ikke se endringene de gjorde umiddelbart. For å se endringene dine umiddelbart, kan du laste inn program i utviklings- og visningsmodus ved å følge JavaScript

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) Forklar hva som er meningen med hekking i MINDRE programmering?

Nesting i LESS er gruppering av utsagn inne i andre utsagn, så det danner en gruppe med relatert kode. Med andre ord når vi legger til en kodebit og legger til en annen kode inni den, kalles den kodebiten nesting.

25) Nevn hva er fargekanalfunksjonene som brukes i LESS?

hue
metning
hsvhue
metning
hswalue
rød
grønn
blå
alpha
Luma
luminans

26) Forklar hva er data-uri i LESS?

I CSS er Data URI-er en av de beste teknikkene, det lar utviklere unngå ekstern bildereferanse og i stedet legge dem inn direkte i et stilark. Data-URIer er den utmerkede måten å redusere HTTP-forespørsler på

27) Forklar hva "Kildekart mindre innebygd"?

Alternativet "Kildekart mindre innebygd" indikerer at vi bør inkludere alle CSS-filene i kildekartet. Noe som betyr at du bare trenger kartfilen din for å komme til originalkilden.

28) Forklar hva er bruken av Extend "all" i LESS?

Når du spesifiserer alle søkeord sist i et utvidelsesargument, forteller det LESS å matche den velgeren som en del av en annen velger.

29) Forklar hva som er «StrictImports» i LESS?

strictImports kontrollerer om kompilatoren vil tillate en @import inne i enten @mediablokker eller andre velgerblokker

30) List opp forskjellene mellom LESS og Sass?

Hvert stilarkspråk er godt i sitt perspektiv og bruk; men det er få forskjeller i bruken.

MINDRE	sass
– LESS bruker JavaScript og behandles på klientsiden	– Sass er kodet i Ruby og behandles dermed til serversiden
– Variablenavn innledes med @-symbolet	– Variabelnavn innledes med $-symbol
– LESS arver ikke flere velgere med ett sett med egenskaper	– Sass arver flere velgere med ett sett med egenskaper
– LESS fungerer ikke med "ukjente" enheter og returnerer heller ikke syntaksfeilvarsel for inkompatible enheter eller matematikkrelatert syntaksfeil	– Sass lar deg jobbe med "ukjente" enheter returnerer også en syntaksfeilmelding for inkompatible enheter

31) Hva er likhetene mellom LESS og Sass?

Mellom LESS og Sass er likhetene

Navnerom
Fargefunksjoner
Blandinger og parametriske blandinger
Hekkeevner
JavaScript-evalueringer

32) Forklar hva er bruken av &combinator?

&combinator setter sammen nestet velger med den overordnede velgeren. Det er nyttig for Pseudo-klasser som :hover og :focus

33) Forklar hva er bruken av operasjoner i LESS?

Operasjoner kan brukes til å utføre funksjoner som

Enkle matematiske operatorer: +, – , *, /
Fargefunksjoner
Matematiske funksjoner
Enhver størrelse eller fargevariabel kan betjenes

34) Forklar hva er bruken av Escape?

Bruken av rømming i LESS

Når du trenger å sende ut CSS som ikke er gyldig CSS-syntaks
Proprietær syntaks gjenkjennes ikke av LESS
LESS kompilator vil gi en feil hvis den ikke brukes
Enkelt prefiks med ~-symbol og satt i anførselstegn

35) Hva inneholder LESS elementer?

Mindre elementer inneholder ofte brukte blandinger som

.gradient
.avrundet
.opasitet
.boks-skygge
.inner-skygge

36) Liste opp alternativer mot MINDRE?

SASS: Syntaktisk fantastiske stilark
SCSS: Versjon.2 av SASS
Stylus

37) Forklar hvordan du kan starte kompilatoren fra kommandolinjen?

Du kan starte kompilatoren fra kommandolinjen i LESS as

$ lessc styles.less

Dette vil sende ut den kompilerte CSS-en til stdout; du kan deretter omdirigere den til en fil du ønsker

$ lessc styles.less > styles.css

38) Hva er bruken av e () funksjon?

Ved hjelp av e()-funksjonen kan du unnslippe en verdi slik at den går rett gjennom til den kompilerte CSS-en, uten å bli lagt merke til av LESS-kompilatoren.

39) Forklar hvordan du kan forhåndskompilere MINDRE til CSS?

For å forhåndskompilere MINDRE til CSS kan du bruke

Kjør less.js med Node.js: Ved å bruke Node.js JavaScript-rammeverket kan du kjøre less.js-skriptet utenfor nettleseren
Bruk lessphp: For implementering av LESS-kompilatoren skrevet i PHP, brukes lessphp
Bruk online kompilator: Bruk online kompilator for rask kompilering av MINDRE kode uten å installere en kompilator
Mindre. app (for Mac-brukere): Less.app er et gratis verktøy for Mac-brukere, dette verktøyet kompilerer dem automatisk til CSS-filer

40) Forklar hvordan flettefunksjon brukes i LESS?

For å samle verdier fra flere egenskaper til en mellomrom eller kommaseparert liste under en enkelt egenskap brukes MINDRE. Det er nyttig for egenskaper som transformasjon og bakgrunn

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

En mixin kan kalle seg MINDRE. Slike rekursive blandinger, når de kombineres med Pattern Matching og Guard Expressions, kan brukes til å lage ulike iterative/loop-strukturer.

42) Hvorfor trenger vi parametriske blandinger i LESS?

Parametriske blandinger er de samme som standardblandinger. Den eneste forskjellen er at parametriske blandinger tar parametere som funksjoner i JavaScript. Etter å ha bestemt parametere til mixins, får du mer kontroll over mixins.