A 40 legnépszerűbb SASS-interjú kérdés és válasz (2025)

Íme a SASS és SCSS interjúk kérdései és válaszai pályakezdőknek és tapasztalt jelölteknek álmaik állása megszerzéséhez.

1) Magyarázd el, mi az a Sass? Hogyan használható?

A Sass a Syntactically Awesome Stylesheets rövidítése, és Hampton Catlin készítette. Ez a CSS3 kiterjesztése, amely beágyazott szabályokat, mixeket, változókat, szelektor öröklődést stb.

A Sass háromféleképpen használható

Parancssori eszközként
Különálló Ruby modulként
Beépülő modulként bármely Rack-kompatibilis keretrendszerhez

Ingyenes PDF letöltés: SASS-interjú kérdések és válaszok

2) Sorolja fel a Sass legfontosabb jellemzőit?

A Sass főbb jellemzői közé tartozik

Teljes CSS3-kompatibilis
Nyelvi kiterjesztések, például egymásba ágyazás, változók és keverékek
Számos hasznos funkció a színek és egyéb értékek kezeléséhez
Speciális szolgáltatások, például vezérlő direktívák a könyvtárakhoz
Jól formázott, testreszabható kimenet

3) Sorolja fel a SassScript által támogatott adattípusokat?

A SassScript hét fő adattípust támogat

Számok (pl. 1,5 képpont)
Szövegsorok (pl. „foo”, „bar” stb.)
Színek (kék, #04a3f9)
logikai értékek (igaz vagy hamis)
Nullok (pl. null)
Értékek listája szóközzel vagy vesszővel elválasztva (pl., 1.5 em, Arial, Helvetica stb.)
Leképezések egyik értékről a másikra (g., ( 1. kulcs: érték1, 2. kulcs: 2. érték))

4) Magyarázza el, hogyan lehet Sass-ban változót definiálni?

A Sass változói ($) előjellel kezdődnek, a változók hozzárendelése pedig kettősponttal (:) történik.

5) Magyarázza el, mi a különbség a Sass és az SCSS között?

A Sass és az SCSS közötti különbség az, hogy

Sass a CSS előprocesszor szintaktikai fejlesztésekkel és a CSS3 kiterjesztésével
A Sassnak két szintaxisa van
Az első szintaxis az „SCSS”, és az .scss kiterjesztést használja
A másik szintaxis behúzott szintaxis vagy csak „Sass”, és a .sass kiterjesztést használja
Míg a Sass szintaxisa laza szóközzel és pontosvessző nélkül, az SCSS inkább a CSS-re hasonlít.

Bármely érvényes CSS-dokumentum átalakítható Sass-re, ha egyszerűen módosítja a kiterjesztést.CSS-ről.SCSS-re.

6) Mire használható a Selector Nesting in Sass?

A Sass programban a kiválasztó egymásba ágyazása lehetőséget kínál a stíluslapok készítőinek arra, hogy hosszú kijelölőket számítsanak ki a rövidebb kijelölők egymásba ágyazásával.

7) Magyarázza el, mire használják a @extend függvényt a Sass-ban?

A Sass-ban az @EXTEND direktíva egyszerű módot biztosít arra, hogy egy szelektor örökölje egy másik stílusát. Célja, hogy lehetőséget biztosítson az A szelektor számára, hogy kiterjessze a stílusokat a B szelektorból. Amikor ezt teszi, az A szelektor hozzáadódik a B szelektorhoz, így mindkettő ugyanazokat a deklarációkat használja. Az @EXTEND megakadályozza a kód felfújását azáltal, hogy az azonos stílust használó szelektorokat egyetlen szabályba csoportosítja.

8) Magyarázza el, mire használható az @IMPORT függvény a Sass-ban?

Az @IMPORT függvény a Sass-ban

Kibővíti a CSS-importálási szabályt az SCSS- és Sass-fájlok importálásának engedélyezésével
Az összes importált fájl egyetlen kimeneti CSS-fájlba egyesül
Gyakorlatilag bármilyen fájlt keverhet és illeszthet, és biztos lehet minden stílusában
Az @IMPORT fájlnevet vesz fel az importáláshoz

9) Miért tartják jobbnak a Sasst, mint a LESS-t?

A Saas lehetővé teszi újrafelhasználható metódusok írását és logikai utasítások, például ciklusok és feltételes kifejezések használatát
A Saas felhasználó hozzáférhet az Iránytű könyvtárhoz, és használhat néhány fantasztikus funkciót, mint például a dinamikus sprite térkép generálás, a régi böngészők feltörései és a CSS3 funkciók böngészők közötti támogatása
Az Iránytű lehetővé teszi külső keretrendszer hozzáadását is, például Blueprint, Foundation vagy Bootstrap felül
A LESS-ben egy alapvető logikai utasítást írhat egy "őrzött mixin" segítségével, amely egyenértékű a Sass if utasításokkal
A LESS-ben a numerikus értékek között hurkolhat rekurzív függvényekkel, míg a Sass lehetővé teszi bármilyen adat ismétlését
A Sass-ban saját, praktikus függvényeket írhat

10) Magyarázza el, mire használható a Mixin funkció a Sass-ban? Mit jelent a mixin SZÁRÍTÁSA?

A Mixin lehetővé teszi olyan stílusok meghatározását, amelyek újra felhasználhatók a stíluslapon anélkül, hogy nem szemantikai osztályokhoz kellene folyamodni, például a .float-left.

A keverőből való SZÁRÍTÁS azt jelenti, hogy dinamikus és statikus részekre osztják fel. A dinamikus mixin az, amelyet a felhasználó ténylegesen hívni fog, a statikus mixin pedig azok az információk, amelyek egyébként megkettőznének.

11) Magyarázza el, mi az a Sass Maps, és mire szolgál a Sass Maps?

A Sass térkép egy hierarchikusan strukturált adat, nem csupán változók halmaza. Segíthet a kód rendszerezésében. A Sass néhány nagyszerű használata

Nagyon hasznos, ha a projektben elemrétegekkel foglalkozik
Hasznos lehet a színkezelésben, ha a különböző színek és árnyalatok hosszú listája
Használjon ikontérképet különféle közösségi média ikonokhoz, például: facebook: '\e607' vagy twitter: '\e602'
Más programkönyvtáraktól eltérően a Sass map csak a használni kívánt kódból fog állni

12) Magyarázza el, miben különböznek a Sass megjegyzései a normál CSS-től?

A normál CSS-ben a megjegyzések szintaxisa /* megjegyzésekkel…*/ kezdődik, míg a SASS-ban kétféle megjegyzés létezik, az egysoros megjegyzések // és a többsoros CSS megjegyzések /* */-vel.

13) Támogatja a Sass a szövegközi megjegyzéseket?

Az egysoros megjegyzéseket // a .scss előfeldolgozó eltávolítja, és nem jelennek meg a .css fájlban

Míg a */ megjegyzések érvényes CSS-ek, és megőrződnek az .scss-ről a .css-fájlra történő fordítás között.

14) Hogyan használják az interpolációt a Sass-ban?

A Sass-ban definiálhat egy elemet egy változóban, és interpolálhatja azt a Sass kódon belül. Hasznos, ha a modulokat külön fájlokban tárolja.

15) Magyarázza el, mikor használhatja a %placeholdereket a Sass-ban?

%placeholders a Sass-ban akkor hasznos, ha olyan stílusokat szeretne írni, amelyeket ki kell bővíteni, de nem szeretné, hogy az alapstílusok megjelenjenek a kimeneti CSS stílusokban

16) Lehetséges-e változókat beágyazni a Sass változóiba?

A változónevek interpolációja jelenleg nem lehetséges a Sass-ban. Használhatja azonban a helyőrzők interpolációját.

17) Mik a Sass hátrányai és előnyei?

Érvek:

A Sass könnyen megtanulható, különösen azok számára, akik Python, Ruby vagy Coffescript háttérrel rendelkeznek, és függvényeket használnak, mixineket írnak.
A CSS könnyen átalakítható Sass-re
A projekt során nem kell hasonló CSS-utasításokat megismételnie az @extend attribútum használatával
Lehetővé teszi olyan változók meghatározását, amelyek az egész projektben használhatók
Szervezettebbé teszi a reagáló projektet

Hátrányok:

Használat előtt időre van szükség az előfeldolgozó új funkcióinak megtanulásához
Előfordulhat, hogy nem tudja használni a böngésző beépített elemellenőrző funkcióját
A hibaelhárítás nehézkes lehet

18) Magyarázza el, mi az a KEVÉS?

A LESS dinamikus stíluslap-előállító nyelv. A LESS egy CSS-előfeldolgozó, amely dinamikus viselkedéssel bővíti ki a CSS-t. Lehetővé teszi a változókat, mixineket, műveleteket és függvényeket. A LESS szerver oldalon és kliens oldalon is fut.

19) Magyarázza el, hogyan hozhat létre KEVESEBB fájlt, és hol tárolja és fordítsa le?

A KEVESEBB fájl létrehozása vagy tárolása hasonló a CSS fájl létrehozásához/tárolásához. Létrehozhat új KEVESEBB fájlt .less kiterjesztéssel, vagy átnevezheti a meglévő .css fájlt .less fájlra. KEVESEBB kódot írhat a meglévő CSS-kóddal.

A legjobb módja a ~/content/ vagy a ~/Styles/ mappában való létrehozásának

20) Milyen módokon használható a LESS?

Az npm-en keresztül LESS használható a parancssorban
Letöltés szkriptfájlként a böngészőhöz
Harmadik féltől származó eszközökhöz használják

21) Milyen változót ábrázolunk LESS-ben?

A LESS lehetővé teszi a változók meghatározását. A LESS-ben a változó @sing-ként jelenik meg. Míg a változók hozzárendelése a (kettőspont) sing segítségével történik. A változók értékei bekerülnek a CSS kimeneti fájlba, valamint a kicsinyített fájlba.

22) Magyarázza el, hogyan hasznos a Mixins?

A mixinek lehetővé teszik egy osztály összes tulajdonságának beágyazását egy másik osztályba azáltal, hogy az osztály nevét szerepeltetik az egyik tulajdonságban. Ez olyan, mint a változók, de egész osztályok számára.

23) Magyarázza el, hogyan lehet kódot beállítani figyelési módban, ha a LESS.js fájlt egy HTML5 böngésző?

Ha a LESS.js fájlt HTML5-böngészőben futtatja, az helyi tárhelyet használ a generált CSS gyorsítótárazásához. A fejlesztők szempontjából azonban nem látják azonnal az általuk végrehajtott változtatásokat. A változtatások azonnali megtekintéséhez a JavaScriptet követve fejlesztői és nézési módban töltheti be a programot

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) Magyarázza el, mit jelent a KEVESEBB programozásban az egymásba ágyazás?

A LESS-be ágyazás az utasítások más utasításokon belüli csoportosítása, így kapcsolódó kódok csoportját alkotja. Más szóval, amikor hozzáadunk egy kódrészletet, és egy másik kódot adunk hozzá, akkor ezt a kódrészletet beágyazásnak nevezzük.

25) Említse meg, milyen színcsatorna-funkciókat használ a KEVÉSBEN?

színárnyalat
telítettség
hsvhue
telítettség
hsvalue
piros
zöld
kék
alfa
luma
fényesség

26) Magyarázza el, mi az a data-uri LESS-ben?

A CSS-ben a Data URI az egyik legjobb technika, lehetővé teszi a fejlesztők számára, hogy elkerüljék a külső képre való hivatkozást, és ehelyett közvetlenül egy stíluslapba ágyazzák be őket. Az adat-URI-k kiváló módszert jelentenek a HTTP-kérések csökkentésére

27) Magyarázza el, mi a „Forrástérkép kevésbé inline”?

A „Source Map Less Inline” opció azt jelzi, hogy az összes CSS-fájlt bele kell foglalnunk a forrástérképbe. Ez azt jelenti, hogy csak a térképfájlra van szüksége az eredeti forrás eléréséhez.

28) Magyarázza el, mi a haszna az „összes” kiterjesztése LESS-ben?

Ha az összes kulcsszót utoljára adja meg egy kiterjesztési argumentumban, a LESS azt mondja, hogy egy másik választó részeként illeszkedjen az adott választóhoz.

29) Magyarázza el, mi az a „StrictImports” a LESS-ben?

A strictImports szabályozza, hogy a fordító engedélyezi-e az @importot a @media blokkon vagy más választóblokkon belül

30) Sorolja fel a LESS és a Sass közötti különbségeket?

Mindegyik stíluslapnyelv jó a perspektívájában és a használatában; azonban kevés különbség van a használatukban.

KEVÉSBÉ	Sass
– A LESS JavaScriptet használ, és kliens oldalon dolgozzák fel	– A Sass Rubyban van kódolva, és így szerveroldalra kerül feldolgozásra
– A változónevek elé a @szimbólum kerül	– A változó neve előtt $ szimbólum szerepel
– A LESS nem örököl több szelektort egy tulajdonságkészlettel	– A Sass több szelektort örököl egyetlen tulajdonságkészlettel
– A LESS nem működik „ismeretlen” egységekkel, és nem ad vissza szintaktikai hibaértesítést nem kompatibilis egységekről vagy matematikai szintaktikai hibákról	– A Sass lehetővé teszi, hogy „ismeretlen” egységekkel dolgozzon, és szintaktikai hibaértesítést ad vissza az inkompatibilis egységekről

31) Mi a hasonlóság a LESS és a Sass között?

LESS és Sass között vannak hasonlóságok

Névterek
Színes funkciók
Mixinek és parametrikus mixinek
Beágyazási képességek
JavaScript kiértékelések

32) Magyarázza el, mire szolgál a &kombinátor?

A &kombinátor összefűzi a beágyazott választót a szülőválasztóval. Hasznos az olyan pszeudo osztályokhoz, mint a :hover és :focus

33) Magyarázza el, mi a haszna a LESS műveleteknek?

A műveletek olyan funkciók végrehajtására használhatók, mint pl

Egyszerű matematikai operátorok: +, – , *, /
Színes funkciók
Matematikai függvények
Bármilyen méretű vagy színváltozó használható

34) Magyarázza el, mi a haszna az Escape-nek?

Az menekülés használata LESS-ben

Ha olyan CSS-t kell kiadnia, amely nem érvényes CSS-szintaxis
A LESS nem ismeri fel a saját szintaxist
A LESS fordító hibát jelez, ha nem használja
Egyszerű előtag ~ szimbólummal és idézőjelek közé

35) Mit tartalmaz a LESS elem?

Kevesebb elem tartalmaz általánosan használt mixineket, mint pl

.gradiens
.kerekített
.átlátszatlanság
.doboz-árnyék
.Belső árnyék

36) Soroljon fel alternatívákat a LESS ellen?

SASS: Szintaktikailag félelmetes stíluslapok
SCSS: A SASS 2-es verziója
Karcolótű

37) Magyarázza el, hogyan hívhatja meg a fordítót a parancssorból?

A fordítót a LESS as parancssorból hívhatja meg

$ lessc styles.less

Ez a lefordított CSS-t a következő helyre adja ki stdout; ezután átirányíthatja egy tetszőleges fájlba

$ lessc styles.less > styles.css

38) Mire használható az e () függvény?

Az e() függvény segítségével kikerülhet egy értéket úgy, hogy az egyenesen a lefordított CSS-be kerüljön anélkül, hogy a KEVÉSebb fordító észrevenné.

39) Magyarázza el, hogyan fordíthatja előre a LESS-t CSS-be?

A LESS CSS-be történő előzetes fordításához használhatja

A less.js futtatása Node.js használatával : A Node.js JavaScript keretrendszer használatával a less.js szkriptet a böngészőn kívül is futtathatja
Lesphp használata: A PHP-ben írt LESS fordító megvalósításához a lessphp-t használjuk
Online fordító használata: Használjon online fordítót a KEVESEBB kód gyors összeállításához fordító telepítése nélkül
Kevésbé. alkalmazás (Mac-felhasználóknak): A Less.app egy ingyenes eszköz Mac felhasználók számára, ez az eszköz automatikusan CSS-fájlokba fordítja őket

40) Magyarázza el, hogyan használják az egyesítés funkciót a LESS-ben?

Ha több tulajdonság értékét egyetlen tulajdonság alatt szóközzel vagy vesszővel elválasztott listába szeretné összesíteni, akkor a LESSZ-t használják. Hasznos olyan tulajdonságoknál, mint a transzformáció és a háttér

41) Hogyan hozhat létre hurokstruktúrákat LESS-ben?

Egy mixin kevésbé nevezheti magát. Az ilyen rekurzív keverők, ha Pattern matching és Guard kifejezésekkel kombinálják, különféle iteratív/hurok struktúrák létrehozására használhatók.

42) Miért van szükségünk paraméteres mixinekre LESS-ben?

A paraméteres mixinek megegyeznek a standard mixinekkel. Az egyetlen különbség az, hogy a parametrikus mixinek olyan paramétereket vesznek fel, mint a JavaScript függvényei. A mixin paramétereinek meghatározása után nagyobb irányítást kap a mixinek felett.