Топ 40 въпроса и отговора за интервю за SASS (2025)

Ето въпроси и отговори за интервю за SASS и SCSS за новопостъпили, както и за опитни кандидати, за да получат мечтаната работа.

1) Обяснете какво е Sass? Как може да се използва?

Sass означава Syntactically Awesome Stylesheets и е създаден от Hampton Catlin. Това е разширение на CSS3, добавящо вложени правила, миксини, променливи, наследяване на селектора и др.

Sass може да се използва по три начина

Като инструмент за команден ред
Като самостоятелен Ruby модул
Като плъгин за всяка рамка с активиран Rack

Безплатно изтегляне на PDF: SASS Интервю Въпроси и отговори

2) Избройте основните функции за Sass?

Ключовите функции за Sass включват

Пълна съвместимост с CSS3
Езикови разширения като влагане, променливи и миксини
Много полезни функции за манипулиране на цветове и други стойности
Разширени функции като контролни директиви за библиотеки
Добре форматиран изход с възможност за персонализиране

3) Избройте типовете данни, които SassScript поддържа?

SassScript поддържа седем основни типа данни

Числа (напр.; 1,5 ,10px)
Низове от текстове (напр., „foo“, „bar“ и т.н.)
Цветове (син, #04a3f9)
Булеви стойности (вярно или невярно)
Нули (напр. нула)
Списък със стойности, разделени с интервал или запетаи (напр., 1.5em, Arial, Helvetica и др.)
Картографира от една стойност към друга (напр., ( ключ 1: стойност1, ключ 2: стойност 2))

4) Обяснете как да дефинирате променлива в Sass?

Променливите в Sass започват със знак ($), а присвояването на променливи се извършва с двоеточие (:).

5) Обяснете каква е разликата между Sass и SCSS?

Разликата между Sass и SCSS е, че

Sass е a CSS предварителен процесор с подобрения в синтаксиса и разширение на CSS3
Sass има два синтаксиса
Първият синтаксис е „SCSS“ и използва разширението .scss
Другият синтаксис е синтаксис с отстъп или просто „Sass“ и използва разширението .sass
Докато Sass има свободен синтаксис с бяло пространство и без точка и запетая, SCSS прилича повече на CSS

Всеки валиден CSS документ може да бъде преобразуван в Sass, като просто промените разширението от.CSS на.SCSS.

6) За какво се използва Selector Nesting в Sass?

В Sass влагането на селекторите предлага начин за авторите на таблици със стилове да изчисляват дълги селектори чрез влагане на по-къси селектори един в друг.

7) Обяснете за какво се използва функция @extend в Sass?

В Sass директивата @EXTEND предоставя лесен начин да позволите на селектор да наследи стиловете на друг. Той има за цел да предостави начин за селектор A да разшири стиловете от селектор B. При това селектор A ще бъде добавен към селектор B, така че и двамата да споделят едни и същи декларации. @EXTEND предотвратява раздуването на кода чрез групиране на селектори, които споделят същия стил, в едно правило.

8) Обяснете каква е употребата на функцията @IMPORT в Sass?

Функцията @IMPORT в Sass

Разширява правилото за импортиране на CSS, като разрешава импортирането на SCSS и Sass файлове
Всички импортирани файлове се обединяват в един изведен CSS файл
Може практически да смесва и съпоставя всеки файл и да бъде сигурен във всички ваши стилове
@IMPORT взема име на файл за импортиране

9) Защо Sass се смята за по-добър от LESS?

Saas ви позволява да пишете методи за многократна употреба и да използвате логически оператори, напр., цикли и условни изрази
Потребителят на Saas може да получи достъп до библиотеката на Compass и да използва някои страхотни функции като генериране на динамична карта на спрайтове, хакове на наследени браузъри и поддръжка на различни браузъри за CSS3 функции
Compass също ви позволява да добавите външна рамка като Blueprint, Foundation или Bootstrap на върха
В LESS можете да напишете основен логически израз, като използвате „охранен миксин“, който е еквивалентен на операторите Sass if
В LESS можете да преминавате през числови стойности, като използвате рекурсивни функции, докато Sass ви позволява да итерирате всякакъв вид данни
В Sass можете да напишете свои собствени удобни функции

10) Обяснете каква е употребата на функцията Mixin в Sass? Какво е значението на изсушаването на миксин?

Mixin ви позволява да дефинирате стилове, които могат да се използват повторно в цялата таблица със стилове, без да е необходимо да прибягвате до несемантични класове като .float-left.

Изсушаването на смесването означава разделянето му на динамични и статични части. Динамичният миксин е този, който потребителят действително ще извика, а статичният миксин е информацията, която иначе би се дублирала.

11) Обяснете какво е Sass Maps и каква е употребата на Sass Maps?

Картата на Sass е структурирана йерархична информация, а не просто набор от променливи. Може да помогне при организирането на кода. Някои страхотни приложения на Sass са

Много е полезно, когато работите със слоеве от елементи във вашия проект
Може да бъде полезно при управление на цветовете, когато има дълъг списък с различни цветове и нюанси
Използвайте карта с икони за различни икони на социални медии, например: facebook: '\e607' или twitter: '\e602'
За разлика от други програмни библиотеки, Sass map ще се състои само от код, който ще бъде използван

12) Обяснете как Sass коментарите са различни от обикновените CSS?

Синтаксисът за коментари в обикновения CSS започва с /* коментари…*/, докато в SASS има два вида коментари, едноредови коментари // и многоредови CSS коментари с /* */.

13) Sass поддържа ли вградени коментари?

Коментарите в един ред // ще бъдат премахнати от .scss предпроцесора и няма да се показват във вашия .css файл

Докато коментарът */ е валиден CSS и ще бъде запазен между превода от .scss във вашия .css файл

14) Как се използва интерполацията в Sass?

В Sass можете да дефинирате елемент в променлива и да го интерполирате в кода на Sass. Полезно е, когато съхранявате вашите модули в отделни файлове.

15) Обяснете кога можете да използвате %placeholders в Sass?

%placeholders в Sass е полезно, когато искате да пишете стилове, които са предназначени да бъдат разширени, но не искате базовите стилове да се виждат в изходните CSS стилове

16) Възможно ли е да се влагат променливи в променливи в Sass?

Интерполацията на имена на променливи в момента не е възможна в Sass. Можете обаче да използвате интерполация на заместители.

17) Какви са минусите и плюсовете на Sass?

Професионалисти:

Sass е лесен за научаване, особено за тези, които имат опит в Python, Ruby или Coffescript и използват функции, пишат mixins
CSS може лесно да се конвертира в Sass
По време на проекта не е нужно да повтаряте подобни CSS изрази, като използвате атрибута @extend
Позволява да се дефинират променливи, които могат да се използват в целия проект
Той поддържа вашия отзивчив проект по-организиран

Против:

Изисква време за научаване на нови функции на препроцесора преди употреба
Възможно е да не можете да използвате вградената функция за инспектор на елементи на браузъра
Отстраняването на неизправности може да бъде трудно

18) Обяснете какво е ПО-МАЛКО?

LESS е език, създаващ динамичен стилов лист. LESS е CSS предварителен процесор и разширява CSS с динамично поведение. Той позволява променливи, миксини, операции и функции. LESS работи както от страната на сървъра, така и от страната на клиента.

19) Обяснете как да създадете LESS файл и къде да го съхранявате и компилира?

Създаването или съхраняването на LESS файл е подобно на създаването/съхраняването на CSS файл. Нов LESS файл може да бъде създаден с разширение .less или можете да преименувате съществуващ .css файл на .less файл. Можете да напишете ПО-МАЛКО код със съществуващ CSS код.

Най-добрият начин да го създадете в папка ~/content/ или ~/Styles/

20) По какви начини може да се използва LESS?

Чрез npm LESS може да се използва в командния ред
Изтеглете като скрипт файл за браузъра
За инструменти на трети страни се използва

21) Как променливата е представена в LESS?

LESS позволява да се дефинират променливи. В LESS променливата е представена като @sing. Докато присвояването на променливи се извършва с: (двоеточие) sing. Стойностите на променливите се вмъкват в CSS изходния файл, както и в минимизирания файл.

22) Обяснете как е полезен Mixins?

Mixins позволяват вграждането на всички свойства на клас в друг клас чрез включване на името на класа като едно от неговите свойства. Това е точно като променливите, но за цели класове.

23) Обяснете как можете да зададете код в режим на гледане, когато стартирате LESS.js в HTML5 браузър?

Ако стартирате LESS.js в HTML5 браузър, той ще използва локално хранилище, за да кешира генерирания CSS. От гледна точка на разработчиците обаче те не могат да видят промените, които са направили незабавно. За да видите вашите промени незабавно, можете да заредите програмата в режим на разработка и гледане, като следвате JavaScript

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) Обяснете какво е значението на влагането в LESS програмирането?

Влагането в LESS е групиране на изрази в други изрази, така че образува група от свързан код. С други думи, когато добавим кодов фрагмент и добавим друг код вътре в него, тогава този кодов фрагмент се нарича влагане.

25) Споменете какви са функциите на цветния канал, използвани в LESS?

оттенък
насищане
hsvhue
насищане
hswalue
червен
зелен
син
алфа
лума
яркост

26) Обяснете какво е data-uri в LESS?

В CSS, Data URI е една от най-добрите техники, тя позволява на разработчиците да избегнат външно препращане към изображения и вместо това да ги вградят директно в таблица със стилове. URI адресите за данни са отличният начин за намаляване на HTTP заявките

27) Обяснете какво е „Карта на източника, по-малко вградена“?

Опцията „Изходна карта по-малко вградена“ показва, че трябва да включим всички CSS файлове в изходната карта. Което означава, че имате нужда само от вашия файл с карта, за да стигнете до оригиналния си източник.

28) Обяснете каква е употребата на Extend “all” в LESS?

Когато посочите всички ключови думи последни в аргумент за разширение, той казва на LESS да съответства на този селектор като част от друг селектор.

29) Обяснете какво е „StrictImports“ в LESS?

strictImports контролира дали компилаторът ще позволи @import вътре в @media блокове или други селекторни блокове

30) Избройте разликите между LESS и Sass?

Всеки стилов език е добър в своята перспектива и използване; обаче има малко разлики в тяхното използване.

ПО-МАЛКО	дръзки приказки
– LESS използва JavaScript и се обработва от страна на клиента	– Sass е кодиран в Ruby и по този начин се обработва от страната на сървъра
– Имената на променливите са предшествани от символа @	– Името на променливата е предшествано със символ $
– LESS не наследява множество селектори с един набор от свойства	– Sass наследява множество селектори с един набор от свойства
– LESS не работи с „неизвестни“ единици, нито връща известие за синтактична грешка за несъвместими единици или синтактична грешка, свързана с математика	– Sass ви позволява да работите с „неизвестни“ единици, също така връща известие за синтактична грешка за несъвместими единици

31) Какви са приликите между LESS и Sass?

Между LESS и Sass има прилики

Пространствата от имена
Цветни функции
Миксини и параметрични миксини
Възможности за гнездене
JavaScript оценки

32) Обяснете каква е употребата на &combinator?

&combinator свързва вложен селектор с родителския селектор. Полезно е за псевдокласове като :hover и :focus

33) Обяснете каква е ползата от операциите в LESS?

Операциите могат да се използват за изпълнение на функции като

Прости математически оператори: +, – , *, /
Цветни функции
Математически функции
Може да се оперира с всякакви размери или цветови променливи

34) Обяснете каква е ползата от Escaping?

Използването на бягство в ПО-МАЛКО

Когато трябва да изведете CSS, който не е валиден CSS синтаксис
Патентован синтаксис не се разпознава от LESS
Компилаторът LESS ще изведе грешка, ако не се използва
Прост префикс със символ ~ и поставен в кавички

35) Какво съдържа елементите LESS?

По-малко елементи съдържат често използвани миксини като

.градиент
.заоблени
.непрозрачност
.box-shadow
.вътрешна-сянка

36) Избройте алтернативи срещу LESS?

SASS: Синтактично страхотни таблици със стилове
SCSS: Версия 2 на SASS
Стълбче

37) Обяснете как можете да извикате компилатора от командния ред?

Можете да извикате компилатора от командния ред в LESS as

$ lessc styles.less

Това ще изведе компилирания CSS към стандартен изход; след това можете да го пренасочите към файл по ваш избор

$ lessc styles.less > styles.css

38) Каква е употребата на функцията e ()?

С помощта на функцията e() можете да избегнете стойност, така че тя да премине директно към компилирания CSS, без да бъде забелязана от LESS компилатора.

39) Обяснете как можете предварително да компилирате LESS в CSS?

За предварително компилиране на LESS в CSS можете да използвате

Изпълнете less.js с помощта на Node.js : С помощта на JavaScript рамката на Node.js можете да стартирате скрипта less.js извън браузъра
Използвайте lessphp: За внедряването на компилатора LESS, написан на PHP, се използва lessphp
Използвайте онлайн компилатор: Използвайте онлайн компилатор за бързо компилиране на LESS код без инсталиране на компилатор
По-малко. приложение (за потребители на Mac): Less.app е безплатен инструмент за потребители на Mac, този инструмент автоматично ги компилира в CSS файлове

40) Обяснете как функцията за сливане се използва в LESS?

За агрегиране на стойности от множество свойства в списък, разделен с интервал или запетая, под едно свойство се използва LESS. Полезно е за свойства като трансформация и фон

41) Как можете да създадете циклични структури в LESS?

Миксин може да се самоизвика в LESS. Такива рекурсивни миксини, когато се комбинират с Pattern matching и Guard Expressions, могат да се използват за създаване на различни итеративни/циклични структури.

42) Защо се нуждаем от параметрични миксини в LESS?

Параметричните миксини са същите като стандартните миксини. Единствената разлика е, че параметричните миксини приемат параметри като функции в JavaScript. След като определите параметрите на миксините, получавате повече контрол върху миксините.