40 parasta SASS-haastattelun kysymystä ja vastausta (2025)

Tässä SASS- ja SCSS-haastattelukysymyksiä ja vastauksia niin fuksilaisille kuin kokeneille hakijoille unelmatyönsä saamiseksi.

1) Selitä mikä on Sass? Miten sitä voidaan käyttää?

Sass tulee sanoista Syntactically Awesome Stylesheets, ja sen on luonut Hampton Catlin. Se on CSS3:n laajennus, joka lisää sisäkkäisiä sääntöjä, sekoituksia, muuttujia, valitsimen periytymistä jne.

Sassia voidaan käyttää kolmella tavalla

Komentorivityökaluna
Erillisenä Ruby-moduulina
Laajennuksena mihin tahansa Rack-yhteensopiviin puitteisiin

Ilmainen PDF-lataus: SASS-haastattelun kysymyksiä ja vastauksia

2) Luettele Sassin tärkeimmät ominaisuudet?

Sassin tärkeimmät ominaisuudet sisältävät

Täysin CSS3-yhteensopiva
Kielilaajennukset, kuten sisäkkäiset, muuttujat ja mixins
Monia hyödyllisiä toimintoja värien ja muiden arvojen käsittelyyn
Kehittyneet ominaisuudet, kuten kirjastojen ohjausohjeet
Hyvin muotoiltu, mukautettava tulos

3) Luettele tietotyypit, joita SassScript tukee?

SassScript tukee seitsemää päätietotyyppiä

Numerot (esim. 1,5px)
Tekstijonot (esim. "foo", "bar" jne.)
Värit (sininen, #04a3f9)
Boolen arvot (tosi tai epätosi)
Nollat (esim; null)
Arvoluettelo välilyönnillä tai pilkuilla erotettuna (esim., 1.5 em, Arial, Helvetica jne.)
Kartoittaa arvosta toiseen (g., ( avain 1: arvo1, avain 2: arvo 2))

4) Selitä kuinka määritellään muuttuja Sassissa?

Sassin muuttujat alkavat ($)-merkillä ja muuttujien määritys tehdään kaksoispisteellä (:).

5) Selitä, mikä ero on Sassin ja SCSS:n välillä?

Ero Sassin ja SCSS:n välillä on se,

Sass on a CSS esiprosessori syntaksin parannuksilla ja CSS3:n laajennuksella
Sassilla on kaksi syntaksia
Ensimmäinen syntaksi on "SCSS" ja se käyttää .scss-laajennusta
Toinen syntaksi on sisennetty syntaksi tai vain "Sass" ja se käyttää .sass-laajennusta
Vaikka Sassissa on väljä syntaksi, jossa on välilyöntejä ja ei puolipisteitä, SCSS muistuttaa enemmän CSS:ää

Mikä tahansa kelvollinen CSS-dokumentti voidaan muuntaa Sass-muotoon yksinkertaisesti muuttamalla laajennus.CSS:stä.SCSS:ksi.

6) Mihin Sassissa Selector Nesting -toimintoa käytetään?

Sassissa valitsimien sisäkkäisyys tarjoaa tyylisivujen tekijöille tavan laskea pitkiä valitsimia sijoittamalla lyhyempiä valitsimia toistensa sisään.

7) Selitä, mihin @extend-funktiota käytetään Sassissa?

Sassissa @EXTEND-direktiivi tarjoaa yksinkertaisen tavan antaa valitsimen periä toisen tyylit. Sen tarkoituksena on tarjota valitsimelle A tapa laajentaa valitsimen B tyylejä. Kun näin tehdään, valitsin A lisätään valitsimeen B, joten niillä molemmilla on samat ilmoitukset. @EXTEND estää koodin paisumisen ryhmittelemällä valitsijat, jotka jakavat saman tyylin yhdeksi säännöksi.

8) Selitä mitä hyötyä @IMPORT-funktiosta on Sassissa?

@IMPORT-toiminto Sassissa

Laajentaa CSS-tuontisääntöä sallimalla SCSS- ja Sass-tiedostojen tuonnin
Kaikki tuodut tiedostot yhdistetään yhdeksi tulostettavaksi CSS-tiedostoksi
Voi käytännössä sekoittaa ja sovittaa mitä tahansa tiedostoja ja olla varma kaikista tyyleistäsi
@IMPORT ottaa tuotavaksi tiedostonimen

9) Miksi Sassia pidetään parempana kuin VÄHEMMÄN?

Saasin avulla voit kirjoittaa uudelleenkäytettäviä menetelmiä ja käyttää logiikkakäskyjä, esim. silmukoita ja ehtoja
Saas-käyttäjä voi käyttää Compass-kirjastoa ja käyttää joitain mahtavia ominaisuuksia, kuten dynaamisten sprite-karttojen luontia, vanhoja selainhakkereita ja CSS3-ominaisuuksien tukea selaimissa.
Compassin avulla voit myös lisätä ulkoisen kehyksen, kuten Blueprintin, Foundationin tai Bootstrap päällä
LESSissä voit kirjoittaa peruslogiikkakäskyn käyttämällä 'guarded mixin'iä, joka vastaa Sass if -lauseita.
LESS-sovelluksessa voit kiertää numeerisia arvoja rekursiivisten funktioiden avulla, kun taas Sass antaa sinun iteroida kaikenlaista dataa
Sassissa voit kirjoittaa omia käteviä funktioita

10) Selitä, mikä on Mixin-toiminnon käyttö Sassissa? Mitä tarkoittaa sekoittimen kuivaaminen?

Mixinin avulla voit määrittää tyylejä, joita voidaan käyttää uudelleen koko tyylitaulukossa ilman, että sinun tarvitsee turvautua ei-semanttisiin luokkiin, kuten .float-left.

Sekoituksen kuivaaminen tarkoittaa sen jakamista dynaamisiin ja staattisiin osiin. Dynaaminen mixin on se, jolle käyttäjä todella aikoo soittaa, ja staattinen mixin on tiedot, jotka muuten monistuisivat.

11) Selitä, mikä Sass Maps on ja mitä Sass Mapsista käytetään?

Sass-kartta on strukturoitu tieto hierarkkisesti eikä vain joukko muuttujia. Se voi auttaa koodin järjestämisessä. Erinomaista Sassin käyttöä ovat

Se on erittäin hyödyllinen käsiteltäessä elementtikerroksia projektissasi
Siitä voi olla apua värinhallinnassa, kun eri värejä ja sävyjä on pitkä lista
Käytä kuvakekartta erilaisille sosiaalisen median kuvakkeille, esimerkiksi: facebook: '\e607' tai twitter: '\e602'
Toisin kuin muut ohjelmointikirjastot, Sass-kartta koostuu vain käytettävästä koodista

12) Selitä, miten Sass-kommentit eroavat tavallisesta CSS:stä?

Kommenttien syntaksi tavallisessa CSS:ssä alkaa /* kommenteilla…*/, kun taas SASS:ssa on kahdenlaisia kommentteja, yksirivisiä kommentteja // ja monirivisiä CSS-kommentteja /* */.

13) Tukeeko Sass upotettuja kommentteja?

Yksiriviset kommentit // poistaa .scss-esikäsittelyohjelma, eivätkä ne näy .css-tiedostossasi

Vaikka kommentit */ ovat kelvollisia CSS-tiedostoja, ja ne säilytetään .scss-käännöksen välillä .css-tiedostoosi

14) Miten interpolointia käytetään Sassissa?

Sassissa voit määrittää muuttujan elementin ja interpoloida sen Sass-koodin sisään. Siitä on hyötyä, kun säilytät moduulit erillisissä tiedostoissa.

15) Selitä milloin voit käyttää %paikkamerkkejä Sassissa?

%placeholders Sassissa on hyödyllinen, kun haluat kirjoittaa tyylejä, jotka on tarkoitettu laajennettavaksi, mutta et halua perustyylejen näkyvän tuloste CSS-tyyleissä

16) Onko mahdollista sijoittaa muuttujia Sassin muuttujien sisälle?

Muuttujien nimien interpolointi ei ole tällä hetkellä mahdollista Sassissa. Voit kuitenkin käyttää paikkamerkkien interpolointia.

17) Mitkä ovat Sassin haitat ja edut?

Plussat:

Sass on helppo oppia erityisesti niille, joilla on Python-, Ruby- tai Coffescript-tausta ja paikka käyttää funktioita, kirjoittamalla mixinejä
CSS voidaan helposti muuntaa Sass-muotoon
Koko projektin aikana sinun ei tarvitse toistaa samanlaisia CSS-lauseita @extend-attribuutilla
Sen avulla voidaan määrittää muuttujia, joita voidaan käyttää koko projektin ajan
Se pitää responsiivisen projektisi järjestyksessä

MIINUKSET:

Esiprosessorin uusien ominaisuuksien oppiminen vaatii aikaa ennen käyttöä
Et ehkä voi käyttää selaimen sisäänrakennettua elementtitarkistusominaisuutta
Vianetsintä voi olla vaikeaa

18) Selitä mikä on VÄHEMMÄ?

LESS on dynaaminen tyylisivu, joka tuottaa kieltä. LESS on CSS-esiprosessori ja laajentaa CSS:ää dynaamisella käytöksellä. Se sallii muuttujat, sekoitukset, toiminnot ja funktiot. LESS toimii sekä palvelin- että asiakaspuolella.

19) Selitä kuinka luoda VÄHEMMÄN tiedosto ja mihin se tallennetaan ja käännetään?

VÄHEMMÄN tiedoston luominen tai tallentaminen on samanlaista kuin CSS-tiedoston luominen/tallennus. Voit luoda uuden VÄHEMMÄN tiedoston, jonka tunniste on .less, tai voit nimetä olemassa olevan .css-tiedoston uudelleen .less-tiedostoksi. Voit kirjoittaa VÄHEMMÄN koodia olemassa olevalla CSS-koodilla.

Paras tapa luoda se ~/content/- tai ~/Styles/-kansioon

20) Millä tavoin VÄHEMMÄN voidaan käyttää?

Via npm LESS voidaan käyttää komentorivillä
Lataa skriptitiedostona selaimeen
Sitä käytetään kolmannen osapuolen työkaluissa

21) Kuinka muuttuja esitetään VÄHEMMÄSSÄ?

LESS mahdollistaa muuttujien määrittämisen. LESS:ssä muuttuja esitetään muodossa @sing. Samalla muuttujan osoitus tehdään: (kaksoispiste) sing. Muuttujien arvot lisätään CSS-tulostetiedostoon sekä minimoituun tiedostoon.

22) Selitä, kuinka Mixins on hyödyllinen?

Mixiinit mahdollistavat luokan kaikkien ominaisuuksien upottamisen toiseen luokkaan sisällyttämällä luokan nimen yhdeksi sen ominaisuuksista. Se on kuin muuttujat, mutta kokonaisille luokille.

23) Selitä, kuinka koodi voidaan asettaa katselutilaan, kun suoritat LESS.js:n an HTML5 selain?

Jos suoritat LESS.js:n HTML5-selaimessa, se käyttää luodun CSS:n välimuistiin paikallista tallennustilaa. Kehittäjän näkökulmasta he eivät kuitenkaan näe tekemiään muutoksia välittömästi. Nähdäksesi muutokset välittömästi, voit ladata ohjelman kehitys- ja katselutilassa seuraamalla JavaScriptiä

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) Selitä, mitä sisäkkäisyyden merkitys on VÄHEMMÄN ohjelmoinnissa?

Nesting in LESS on lausekkeiden klusterointi muiden käskyjen sisällä, joten se muodostaa ryhmän toisiinsa liittyviä koodeja. Toisin sanoen kun lisäämme koodinpätkän ja lisäämme sen sisään toisen koodin, sitä koodinpätkää kutsutaan sisäkkäisiksi.

25) Mainitse mitä värikanavatoimintoja käytetään VÄHEMMÄSSÄ?

värisävy
kyllästyminen
hsvhue
kyllästyminen
hsvalue
punainen
vihreä
sininen
alfa
luma
luminanssi

26) Selitä, mikä data-uri on VÄHEMMÄSSÄ?

CSS:ssä Data URI:t ovat yksi parhaista tekniikoista, joiden avulla kehittäjät voivat välttää ulkoisen kuvaviittauksen ja upottaa ne suoraan tyylitaulukkoon. Tietojen URI:t ovat erinomainen tapa vähentää HTTP-pyyntöjä

27) Selitä mikä "lähdekartta vähemmän inline"?

"Source Map Less Inline" -vaihtoehto osoittaa, että meidän pitäisi sisällyttää kaikki CSS-tiedostot lähdekarttaan. Tämä tarkoittaa, että tarvitset vain karttatiedoston päästäksesi alkuperäiseen lähteeseesi.

28) Selitä, mitä Extend “kaikki” käyttö on VÄHEMMÄSSÄ?

Kun määrität kaikki avainsanat viimeisenä laajennusargumentissa, se käskee VÄHEMMÄN vastaamaan kyseistä valitsinta osana toista valitsinta.

29) Selitä, mikä on "StrictImports" VÄHEMMÄSSÄ?

strictImports määrittää salliiko kääntäjä @importin joko @medialohkojen vai muiden valitsinlohkojen sisällä

30) Luettele erot LESS:n ja Sassin välillä?

Jokainen tyylisivukieli on hyvä näkökulmastaan ja käyttötarkoitukseltaan; niiden käytössä on kuitenkin vähän eroja.

VÄHEMMÄN	nenäkkyys
– LESS käyttää JavaScriptiä ja käsitellään asiakaspuolella	– Sass on koodattu Rubylla ja prosessoitu siten palvelinpuolelle
– Muuttujien nimien edessä on @-symboli	– Muuttujan nimen alussa on $-symboli
– LESS ei peri useita valitsimia yhdellä ominaisuusjoukolla	– Sass perii useita valitsimia yhdellä ominaisuusjoukolla
– LESS ei toimi "tuntemattomien" yksiköiden kanssa eikä palauta syntaksivirheilmoitusta yhteensopimattomista yksiköistä tai matematiikkaan liittyvästä syntaksivirheestä	- Sass antaa sinun työskennellä "tuntemattomien" yksiköiden kanssa, palauttaa myös syntaksivirheilmoituksen yhteensopimattomista yksiköistä

31) Mitä yhtäläisyyksiä LESS:n ja Sassin välillä on?

LESSin ja Sassin välillä on yhtäläisyyksiä

Nimiavaruuksia
Väritoiminnot
Mixins ja parametric mixins
Pesäytymisominaisuudet
JavaScript-arvioinnit

32) Selitä, mikä on &combinatorin käyttö?

&kombinaattori ketjuttaa sisäkkäisen valitsimen päävalitsimeen. Se on hyödyllinen pseudo-luokissa, kuten :hover ja :focus

33) Selitä mitä hyötyä LESS-toiminnoista on?

Toimintoja voidaan käyttää suorittamaan toimintoja, kuten

Yksinkertaiset matemaattiset operaattorit: +, – , *, /
Väritoiminnot
Matemaattiset toiminnot
Mitä tahansa koko- tai värimuuttujaa voidaan käyttää

34) Selitä, mitä hyötyä Escapingista on?

Pakenemisen käyttö VÄHEMMÄSSÄ

Kun sinun on tulostettava CSS, joka ei ole kelvollinen CSS-syntaksi
LESS ei tunnista omaa syntaksia
LESS-kääntäjä antaa virheen, jos sitä ei käytetä
Yksinkertainen etuliite ~-symbolilla ja lainausmerkeissä

35) Mitä VÄHEMMÄN elementtejä sisältää?

Vähemmän elementtejä sisältää yleisesti käytettyjä mixinejä, kuten

.kaltevuus
.pyöristetty
.opasiteetti
.box-varjo
.sisäinen varjo

36) Listaa vaihtoehtoja VÄHEMMÄN?

SASS: Syntaktisesti mahtavia tyylisivuja
SCSS: SASS:n versio.2
Stylus

37) Selitä, kuinka voit käynnistää kääntäjän komentoriviltä?

Voit kutsua kääntäjän komentoriviltä VÄHEMMÄN as

$ lessc styles.less

Tämä tulostaa käännetyn CSS:n kohteeseen stdout; voit sitten ohjata sen haluamaasi tiedostoon

$ lessc styles.less > styles.css

38) Mitä hyötyä e () -funktiosta on?

e()-funktion avulla voit paeta arvoa niin, että se kulkee suoraan käännettyyn CSS:ään ilman, että VÄHEMMÄN-kääntäjä huomaa sitä.

39) Selitä, kuinka voit esikääntää LESS:n CSS:ksi?

Voit esikääntää LESS:in CSS:ksi

Suorita less.js Node.js:n avulla: Käyttämällä Node.js JavaScript -kehystä voit suorittaa less.js-komentosarjan selaimen ulkopuolella
Käytä lessphp:tä: PHP:llä kirjoitetun LESS-kääntäjän toteuttamiseen käytetään lessphp:tä
Käytä online-kääntäjää: Käytä online-kääntäjää VÄHEMMÄN koodin nopeaan kääntämiseen ilman kääntäjän asennusta
Vähemmän. sovellus (Mac-käyttäjille): Less.app on ilmainen työkalu Mac-käyttäjille, tämä työkalu kokoaa ne automaattisesti CSS-tiedostoiksi

40) Selitä, kuinka yhdistämistoimintoa käytetään VÄHEMMÄSSÄ?

Arvojen yhdistämiseen useista kiinteistöistä välilyönnillä tai pilkuilla erotettuun luetteloon yhden ominaisuuden alla käytetään VÄHEMMÄN. Se on hyödyllinen ominaisuuksille, kuten muunnos ja tausta

41) Kuinka voit luoda silmukkarakenteita LESSissä?

Mixin voi kutsua itseään VÄHEMMÄN. Tällaisia rekursiivisia mixinejä voidaan käyttää kuvioiden sovitukseen ja vartijalausekkeisiin yhdistettynä erilaisten iteratiivisten/silmukkarakenteiden luomiseen.

42) Miksi tarvitsemme parametrisekoituksia VÄHEMMÄSSÄ?

Parametriset mixiinit ovat samat kuin tavalliset mixiinit. Ainoa ero on, että parametriset mixiinit ottavat parametreja, kuten JavaScriptin funktioita. Kun olet määrittänyt parametrit mixineille, saat enemmän hallintaa mixineihin.