Топ-40 запитань і відповідей на інтерв’ю SASS (2025)

Ось питання та відповіді на співбесіді SASS і SCSS для новачків, а також для досвідчених кандидатів, щоб отримати роботу своєї мрії.

1) Поясніть, що таке Sass? Як це можна використовувати?

Sass означає Syntactically Awesome Stylesheets і був створений Хемптоном Кетліном. Це розширення CSS3, яке додає вкладені правила, міксини, змінні, успадкування селекторів тощо.

Sass можна використовувати трьома способами

Як інструмент командного рядка
Як окремий модуль Ruby
Як плагін для будь-якої рамки з підтримкою Rack

Безкоштовне завантаження PDF: Запитання та відповіді на інтерв’ю SASS

2) Перелічіть ключові функції Sass?

Основні функції для Sass включають

Повна сумісність із CSS3
Розширення мови, такі як вкладення, змінні та міксини
Багато корисних функцій для керування кольорами та іншими значеннями
Розширені функції, такі як директиви керування для бібліотек
Добре відформатований, настроюваний вихід

3) Перелічіть типи даних, які підтримує SassScript?

SassScript підтримує сім основних типів даних

Числа (наприклад; 1,5 ,10px)
Рядки текстів (наприклад, «foo», «bar» тощо)
Кольори (синій, #04a3f9)
Логічні значення (істина або помилка)
Нулі (наприклад; null)
Список значень, розділених пробілами або комами (g., 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) Для чого використовується вкладення селектора в 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 — це структуровані дані в ієрархічному порядку, а не просто набір змінних. Це може допомогти в організації коду. Деякі чудові переваги Sass є

Це дуже корисно при роботі з шарами елементів у вашому проекті
Це може бути корисно в управлінні кольором, коли є довгий список різних кольорів і відтінків
Використовуйте карту значків для різних значків соціальних мереж, наприклад: facebook: '\e607' або twitter: '\e602'
На відміну від інших бібліотек програмування, карта Sass складатиметься лише з коду, який буде використано

12) Поясніть, чим коментарі Sass відрізняються від звичайного CSS?

Синтаксис для коментарів у звичайному CSS починається з /* comments…*/, тоді як у SASS є два типи коментарів: однорядкові коментарі // та багаторядкові коментарі CSS з /* */.

13) Чи підтримує Sass вбудовані коментарі?

Однорядкові коментарі // будуть видалені препроцесором .scss і не відображатимуться у вашому файлі .css

Хоча коментар */ є дійсним CSS і буде збережено між перекладом із .scss у ваш файл .css

14) Як інтерполяція використовується в Sass?

У Sass ви можете визначити елемент у змінній та інтерполювати його в код Sass. Це корисно, коли ви зберігаєте свої модулі в окремих файлах.

15) Поясніть, коли можна використовувати заповнювачі % у Sass?

%placeholders у Sass корисно, коли ви хочете написати стилі, які мали бути розширеними, але ви не хочете, щоб базові стилі відображалися у вихідних стилях CSS

16) Чи можливо вкладення змінних у змінні в Sass?

Інтерполяція назв змінних зараз неможлива в Sass. Однак ви можете використовувати інтерполяцію заповнювачів.

17) Які мінуси та плюси Sass?

Плюси:

Sass легко освоїти, особливо для тих, хто має знання Python, Ruby або Coffescript і використовує функції, пише міксини
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?

Міксини дозволяють вставляти всі властивості класу в інший клас, включаючи назву класу як одну з його властивостей. Це як змінні, але для цілих класів.

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
насичення
hswale
червоний
зелений
синій
альфа
яркостной
яскравість

26) Поясніть, що таке data-uri в LESS?

У CSS URI даних є одним із найкращих методів, він дозволяє розробникам уникати зовнішніх посилань на зображення та замість цього вставляти їх безпосередньо в таблицю стилів. URI даних є чудовим способом зменшити кількість запитів HTTP

27) Поясніть, що таке «Source Map Less Inline»?

Параметр «Source Map Less Inline» вказує на те, що ми повинні включити всі файли CSS у вихідну карту. Це означає, що вам потрібен лише файл карти, щоб отримати доступ до оригінального джерела.

28) Поясніть, яка користь від Extend “all” у LESS?

Коли ви вказуєте всі ключові слова останніми в аргументі розширення, це повідомляє LESS відповідати цьому селектору як частині іншого селектора.

29) Поясніть, що таке «StrictImports» у LESS?

strictImports контролює, чи дозволить компілятор @import всередині блоків @media або інших блоків вибору

30) Перелічіть відмінності між LESS і Sass?

Кожна мова таблиці стилів хороша з погляду та використання; однак є кілька відмінностей у їх використанні.

МЕНШЕ	Sass
– LESS використовує JavaScript і обробляється на стороні клієнта	– Sass кодується в Ruby і, таким чином, обробляється на стороні сервера
– Імена змінних починаються символом @	– Перед назвою змінної стоїть символ $
– LESS не успадковує кілька селекторів з одним набором властивостей	– Sass успадковує кілька селекторів з одним набором властивостей
– LESS не працює з «невідомими» одиницями, а також не повертає повідомлення про синтаксичну помилку для несумісних одиниць або синтаксичну помилку, пов’язану з математикою.	– Sass дозволяє вам працювати з «невідомими» одиницями, а також повертає сповіщення про синтаксичні помилки для несумісних одиниць

31) У чому схожість між LESS і Sass?

Між LESS і Sass є схожість

Простори імен
Функції кольору
Міксини та параметричні міксини
Можливості гніздування
Оцінки JavaScript

32) Поясніть, для чого корисний &combinator?

&combinator об’єднує вкладений селектор із батьківським селектором. Це корисно для псевдокласів, таких як :hover і :focus

33) Поясніть, у чому користь операцій у LESS?

Операції можна використовувати для виконання таких функцій, як

Прості математичні оператори: +, – , *, /
Функції кольору
Математичні функції
Можна працювати з будь-яким розміром або кольором

34) Поясніть, яка користь від Escaping?

Використання екранування в LESS

Коли вам потрібно вивести CSS із недійсним синтаксисом CSS
Власний синтаксис не розпізнається LESS
Компілятор LESS видасть помилку, якщо не використовувати
Простий префікс із символом ~ і взятий у лапки

35) Що містить елемент LESS?

Менше елементів містять часто використовувані міксини, такі як

.градієнт
.округлений
.непрозорість
.box-shadow
.inner-shadow

36) Перелічіть альтернативи проти LESS?

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

37) Поясніть, як можна викликати компілятор з командного рядка?

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

$ lessc styles.less

Це виведе скомпільований CSS у stdout; потім ви можете перенаправити його до файлу за вашим вибором

$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. Такі рекурсивні міксини в поєднанні зі збігом шаблонів і захисними виразами можна використовувати для створення різноманітних ітеративних/циклових структур.

42) Навіщо нам потрібні параметричні міксини в LESS?

Параметричні міксини такі ж, як стандартні міксини. Єдина відмінність полягає в тому, що параметричні міксини приймають параметри, як функції в JavaScript. Після визначення параметрів міксинів ви отримуєте більше контролю над міксинами.