40 nejčastějších otázek a odpovědí v rozhovoru SASS (2025)

Zde jsou otázky a odpovědi na pohovory SASS a SCSS pro nováčky i zkušené kandidáty, aby získali svou vysněnou práci.

1) Vysvětlete, co je Sass? Jak to lze použít?

Sass je zkratka pro Syntactically Awesome Stylesheets a vytvořil ho Hampton Catlin. Jedná se o rozšíření CSS3, které přidává vnořená pravidla, mixiny, proměnné, dědičnost selektoru atd.

Sass lze použít třemi způsoby

Jako nástroj příkazového řádku
Jako samostatný modul Ruby
Jako plugin pro jakýkoli framework podporující Rack

Zdarma ke stažení PDF: Otázky a odpovědi k rozhovoru SASS

2) Vyjmenujte klíčové funkce pro Sass?

Mezi klíčové funkce pro Sass patří

Plně kompatibilní s CSS3
Rozšíření jazyka, jako je vnoření, proměnné a mixiny
Mnoho užitečných funkcí pro manipulaci s barvami a dalšími hodnotami
Pokročilé funkce, jako jsou řídicí směrnice pro knihovny
Dobře formátovaný, přizpůsobitelný výstup

3) Vyjmenujte datové typy, které SassScript podporuje?

SassScript podporuje sedm hlavních datových typů

Čísla (např.; 1,5 ,10px)
Řetězce textů (např. „foo“, „bar“ atd.)
Barvy (modrá, #04a3f9)
Booleovské hodnoty (pravda nebo nepravda)
Nulové (např.; null)
Seznam hodnot oddělených mezerou nebo čárkami (např. 1.5em, Arial, Helvetica atd.)
Mapuje z jedné hodnoty na druhou (např. ( klíč 1: hodnota1, klíč 2: hodnota 2))

4) Vysvětlete, jak definovat proměnnou v Sass?

Proměnné v Sass začínají znakem ($) a přiřazení proměnných se provádí dvojtečkou (:).

5) Vysvětlete, jaký je rozdíl mezi Sass a SCSS?

Rozdíl mezi Sass a SCSS je v tom,

Sass je a CSS pre-procesor s vylepšeními syntaxe a rozšířením CSS3
Sass má dvě syntaxe
První syntaxe je „SCSS“ a používá příponu .scss
Další syntaxí je odsazená syntaxe nebo jen „Sass“ a používá příponu .sass
Zatímco Sass má volnou syntaxi s mezerami a žádnými středníky, SCSS připomíná spíše CSS

Jakýkoli platný dokument CSS lze převést na Sass jednoduchou změnou přípony z.CSS na.SCSS.

6) K čemu se Selector Nesting v Sass používá?

V Sass nabízí vnoření selektorů autorům stylů způsob, jak vypočítat dlouhé selektory vnořením kratších selektorů do sebe.

7) Vysvětlete, k čemu se v Sass používá funkce @extend?

V Sass direktiva @EXTEND poskytuje jednoduchý způsob, jak umožnit selektoru zdědit styly jiného. Jeho cílem je poskytnout selektoru A způsob, jak rozšířit styly ze selektoru B. Když tak učiníte, selektor A bude přidán k selektoru B, takže oba sdílejí stejné deklarace. @EXTEND zabraňuje nadýmání kódu seskupením selektorů, které sdílejí stejný styl, do jednoho pravidla.

8) Vysvětlete, k čemu slouží funkce @IMPORT v Sass?

Funkce @IMPORT v Sass

Rozšiřuje pravidlo importu CSS povolením importu souborů SCSS a Sass
Všechny importované soubory jsou sloučeny do jednoho výstupního souboru CSS
Může virtuálně kombinovat jakýkoli soubor a být si jistý všemi svými styly
@IMPORT převezme název souboru k importu

9) Proč je Sass považován za lepší než LESS?

Saas umožňuje psát opakovaně použitelné metody a používat logické příkazy, např. cykly a podmíněnosti
Uživatel Saas může přistupovat ke knihovně Compass a používat některé úžasné funkce, jako je generování dynamických sprite map, hackování starších prohlížečů a podpora funkcí CSS3 napříč prohlížeči.
Kompas také umožňuje přidat externí rámec, jako je Blueprint, Foundation nebo Bootstrap na vrchu
V LESS můžete napsat základní logický příkaz pomocí 'hlídaného mixinu', což je ekvivalentní příkazům Sass if
V LESS můžete procházet číselné hodnoty pomocí rekurzivních funkcí, zatímco Sass vám umožňuje iterovat jakýkoli druh dat
V Sass můžete psát své vlastní užitečné funkce

10) Vysvětlete, k čemu slouží funkce Mixin v Sass? Co znamená SUŠENÍ mixinu?

Mixin vám umožňuje definovat styly, které lze znovu použít v celé šabloně stylů, aniž byste se museli uchýlit k nesémantickým třídám, jako je .float-left.

SUŠENÍ z mixu znamená jeho rozdělení na dynamickou a statickou část. Dynamický mixin je ten, který uživatel skutečně zavolá, a statický mixin jsou části informací, které by se jinak duplikovaly.

11) Vysvětlete, co jsou Sass Maps a jaké je použití Sass Map?

Sass mapa je hierarchicky strukturovaná data a ne jen shluk proměnných. Může pomoci při organizaci kódu. Některé skvělé využití Sass jsou

Je to velmi užitečné při práci s vrstvami prvků ve vašem projektu
To může být užitečné při správě barev, když existuje dlouhý seznam různých barev a odstínů
Použijte mapu ikon pro různé ikony sociálních médií, například: facebook: '\e607' nebo twitter: '\e602'
Na rozdíl od jiných programovacích knihoven bude Sass mapa sestávat pouze z kódu, který bude použit

12) Vysvětlete, jak se Sass komentáře liší od běžných CSS?

Syntaxe komentářů v běžném CSS začíná /* komentáři…*/, zatímco v SASS existují dva typy komentářů, jednořádkové komentáře // a víceřádkové komentáře CSS s /* */.

13) Podporuje Sass vložené komentáře?

Jednořádkové komentáře // budou odstraněny předprocesorem .scss a neobjeví se ve vašem souboru .css

Zatímco komentáře */ jsou platnými CSS a budou zachovány mezi překladem z .scss do vašeho souboru .css

14) Jak se používá interpolace v Sass?

V Sass můžete definovat prvek v proměnné a interpolovat jej uvnitř kódu Sass. To je užitečné, když uchováváte své moduly v samostatných souborech.

15) Vysvětlete, kdy můžete v Sass použít zástupné symboly %?

%placeholders v Sass je užitečné, když chcete psát styly, které měly být rozšířeny, ale nechcete, aby základní styly byly vidět ve výstupních stylech CSS

16) Je možné v Sass vnořit proměnné do proměnných?

Interpolace jmen proměnných není v současné době v Sass možná. Můžete však použít interpolaci zástupných symbolů.

17) Jaké jsou nevýhody a klady Sass?

Klady:

Sass se snadno učí zejména pro ty, kteří mají znalosti Pythonu, Ruby nebo Coffescriptu a umí používat funkce, psát mixiny
CSS lze snadno převést na Sass
V průběhu projektu nemusíte opakovat podobné příkazy CSS pomocí atributu @extend
Umožňuje definovat proměnné, které jsou použitelné v celém projektu
Udržuje váš responzivní projekt organizovanější

Nevýhody:

Před použitím vyžaduje čas naučit se nové funkce preprocesoru
Možná nebudete moci používat vestavěnou funkci inspektor prvků prohlížeče
Odstraňování problémů může být obtížné

18) Vysvětlete, co je MENŠÍ?

LESS je jazyk pro tvorbu dynamických stylů. LESS je předprocesor CSS a rozšiřuje CSS o dynamické chování. Umožňuje proměnné, mixiny, operace a funkce. LESS běží na straně serveru i na straně klienta.

19) Vysvětlete, jak vytvořit soubor LESS a kam jej uložit a zkompilovat?

Vytváření nebo ukládání souboru LESS je podobné vytváření/ukládání souboru CSS. Nový soubor LESS lze vytvořit s příponou .less nebo můžete přejmenovat existující soubor .css na soubor .less. S existujícím kódem CSS můžete napsat MÉNĚ kódu.

Nejlepší způsob, jak jej vytvořit ve složce ~/content/ nebo ~/Styles/

20) Jakými způsoby lze použít LESS?

Přes npm LESS lze použít na příkazovém řádku
Stáhnout jako soubor skriptu pro prohlížeč
Pro nástroje třetích stran se používá

21) Jak je proměnná zastoupena v LESS?

LESS umožňuje definovat proměnné. V LESS je proměnná reprezentována jako @sing. Zatímco přiřazení proměnné se provádí pomocí: (dvojtečka) sing. Hodnoty proměnných se vkládají do výstupního souboru CSS i do minifikovaného souboru.

22) Vysvětlete, jak jsou Mixins užitečné?

Mixiny umožňují vložení všech vlastností třídy do jiné třídy tím, že zahrnou název třídy jako jednu z jejích vlastností. Je to jako proměnné, ale pro celé třídy.

23) Vysvětlete, jak lze nastavit kód v režimu sledování, když spustíte LESS.js v an HTML5 prohlížeč?

Pokud spustíte LESS.js v prohlížeči HTML5, bude používat místní úložiště k mezipaměti vygenerovaného CSS. Z pohledu vývojáře však nevidí změny, které provedli okamžitě. Abyste své změny viděli okamžitě, můžete načíst program v režimu vývoje a sledování pomocí JavaScriptu

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) Vysvětlete, jaký je význam vnořování v programování LESS?

Vnoření v LESS je shlukování příkazů uvnitř jiných příkazů, takže tvoří skupinu souvisejícího kódu. Jinými slovy, když přidáme fragment kódu a přidáme do něj další kód, pak se tento fragment kódu nazývá vnoření.

25) Uveďte, jaké jsou funkce barevných kanálů používané v LESS?

odstín
nasycení
hsvhue
nasycení
hswalue
červený
zelená
modrý
alfa
luma
jas

26) Vysvětlete, co je data-uri v LESS?

V CSS je Data URI jednou z nejlepších technik, umožňuje vývojářům vyhnout se externím odkazům na obrázky a místo toho je vložit přímo do šablony stylů. Data URI jsou vynikajícím způsobem, jak snížit požadavky HTTP

27) Vysvětlete, co „Zdrojová mapa Méně Inline“?

Možnost „Source Map Less Inline“ označuje, že bychom měli do zdrojové mapy zahrnout všechny soubory CSS. To znamená, že potřebujete pouze svůj mapový soubor, abyste se dostali k původnímu zdroji.

28) Vysvětlete, k čemu slouží Extend „all“ v LESS?

Když zadáte všechna klíčová slova jako poslední v argumentu rozšíření, řekne LESS, aby odpovídala tomuto selektoru jako součást jiného selektoru.

29) Vysvětlete, co je „StrictImports“ v LESS?

StrictImports řídí, zda kompilátor povolí @import uvnitř bloků @media nebo jiných bloků výběru

30) Uveďte rozdíly mezi LESS a Sass?

Každý jazyk stylů je dobrý ve své perspektivě a použití; existuje však několik rozdílů v jejich použití.

MÉNĚ	Sass
– LESS používá JavaScript a zpracovává se na straně klienta	– Sass je kódován v Ruby a tedy zpracováván na straně serveru
– Názvy proměnných jsou uvozeny symbolem @	– Před názvem proměnné je symbol $
– LESS nedědí více selektorů s jednou sadou vlastností	– Sass zdědí více selektorů s jednou sadou vlastností
– LESS nepracuje s „neznámými“ jednotkami ani nevrací upozornění na chybu syntaxe pro nekompatibilní jednotky nebo chybu syntaxe související s matematikou	– Sass vám umožňuje pracovat s „neznámými“ jednotkami a také vrací upozornění na chybu syntaxe pro nekompatibilní jednotky

31) Jaké jsou podobnosti mezi LESS a Sass?

Mezi LESS a Sass jsou podobnosti

Jmenné prostory
Barevné funkce
Mixiny a parametrické mixiny
Vnořovací schopnosti
Hodnocení JavaScriptu

32) Vysvětlete, k čemu se používá &kombinátor?

&kombinátor zřetězí vnořený selektor s nadřazeným selektorem. Je to užitečné pro Pseudo třídy jako :hover a :focus

33) Vysvětlete, k čemu slouží operace v LESS?

Operace lze použít k provádění funkcí, jako je

Jednoduché matematické operátory: +, – , *, /
Barevné funkce
Matematické funkce
Lze ovládat jakoukoli proměnnou velikosti nebo barvy

34) Vysvětlete, k čemu slouží Escaping?

Použití útěku v LESS

Když potřebujete výstup CSS, který není platnou syntaxí CSS
Proprietární syntaxe není rozpoznána LESS
Kompilátor LESS vyvolá chybu, pokud není použit
Jednoduchá předpona se symbolem ~ a v uvozovkách

35) Co obsahuje prvky LESS?

Méně prvků obsahuje běžně používané mixiny jako

.spád
.zaoblený
.neprůhlednost
.box-shadow
.vnitřní stín

36) Vyjmenujte alternativy proti LESS?

SASS: Syntakticky úžasné styly
SCSS: Verze 2 SASS
Jehla

37) Vysvětlete, jak můžete vyvolat kompilátor z příkazového řádku?

Kompilátor můžete vyvolat z příkazového řádku v LESS as

$ méně stylů.méně

Tím se vytvoří výstup zkompilovaného CSS stdout; poté jej můžete přesměrovat do souboru dle vašeho výběru

$ lessc styles.less > styles.css

38) K čemu slouží funkce e ()?

Pomocí funkce e() můžete uniknout hodnotě, aby prošla přímo do kompilovaného CSS, aniž by si toho všiml kompilátor LESS.

39) Vysvětlete, jak můžete předkompilovat LESS do CSS?

K předkompilaci LESS do CSS můžete použít

Spuštění less.js pomocí Node.js : Pomocí rámce JavaScript Node.js můžete skript less.js spustit mimo prohlížeč
Use lessphp: Pro implementaci LESS kompilátoru napsaného v PHP se používá lessphp
Použití online kompilátoru: Použijte online kompilátor pro rychlou kompilaci LESS kódu bez instalace kompilátoru
Méně. app (pro uživatele Mac): Less.app je bezplatný nástroj pro uživatele Mac, tento nástroj je automaticky kompiluje do souborů CSS

40) Vysvětlete, jak se v LESS používá funkce sloučení?

Pro agregaci hodnot z více vlastností do seznamu odděleného mezerou nebo čárkou pod jedinou vlastností se používá LESS. Je to užitečné pro vlastnosti, jako je transformace a pozadí

41) Jak můžete vytvořit smyčkové struktury v LESS?

Mixin se může volat v LESS. Takové rekurzivní mixiny, když jsou kombinovány s porovnáváním vzorů a ochrannými výrazy, lze použít k vytvoření různých iteračních/smyčkových struktur.

42) Proč potřebujeme parametrické mixiny v LESS?

Parametrické mixiny jsou stejné jako standardní mixiny. Jediný rozdíl je v tom, že parametrické mixiny berou parametry jako funkce v JavaScriptu. Po určení parametrů mixinů získáte větší kontrolu nad mixiny.