40 лучших вопросов и ответов на собеседовании SASS (2024 г.)

Вот вопросы и ответы на собеседованиях SASS и SCSS для новичков, а также для опытных кандидатов, желающих получить работу своей мечты.


1) Объясните, что такое Sass? Как его можно использовать?

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

Sass можно использовать тремя способами

  • Как инструмент командной строки
  • Как отдельный модуль Ruby
  • В качестве плагина для любой платформы с поддержкой Rack.

Бесплатная загрузка в формате PDF: Вопросы и ответы для интервью SASS


2) Перечислить ключевые функции Sass?

Ключевые особенности Sass включают в себя

  • Полная совместимость с CSS3
  • Расширения языка, такие как вложенность, переменные и примеси.
  • Множество полезных функций для управления цветами и другими значениями.
  • Расширенные функции, такие как директивы управления для библиотек.
  • Хорошо отформатированный, настраиваемый вывод

3) Перечислите типы данных, которые поддерживает SassScript?

SassScript поддерживает семь основных типов данных.

  1. Числа (например, 1,5, 10 пикселей)
  2. Строки текста (например, «foo», «bar» и т. д.)
  3. Цвета (синий, #04a3f9)
  4. Логические значения (истина или ложь)
  5. Нулевые значения (например, ноль)
  6. Список значений, разделенных пробелом или запятыми (например, 1.5em, Arial, Helvetica и т. д.)
  7. Сопоставляет одно значение с другим (например, (ключ 1: значение1, ключ 2: значение 2))

4) Объясните, как определить переменную в Sass?

Переменные в Sass начинаются со знака ($), а присвоение переменных выполняется с помощью двоеточия (:).


5) Объясните, в чем разница между Sass и SCSS?

Разница между Sass и SCSS заключается в том, что

  • Сасс - это CSS препроцессор с улучшениями синтаксиса и расширением CSS3
  • Sass имеет два синтаксиса
  • Первый синтаксис — «SCSS», и он использует расширение .scss.
  • Другой синтаксис — это синтаксис с отступом или просто «Sass», и он использует расширение .sass.
  • В то время как Sass имеет свободный синтаксис с пробелами и без точек с запятой, SCSS больше похож на CSS.

Любой действительный документ CSS можно преобразовать в Sass, просто изменив расширение с .CSS на .SCSS.

Вопросы для собеседования SASS
Вопросы для собеседования SASS

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 или Начальная загрузка поверх
  • В LESS вы можете написать базовый логический оператор, используя «защищенный миксин», который эквивалентен операторам if в Sass.
  • В LESS вы можете перебирать числовые значения, используя рекурсивные функции, а Sass позволяет перебирать любые типы данных.
  • В Sass вы можете писать свои собственные удобные функции.

10) Объясните, для чего используется функция Mixin в Sass? В чем смысл DRY-исключения миксина?

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

Высушивание микса означает разделение его на динамическую и статическую части. Динамический миксин — это тот, который на самом деле собирается вызвать пользователь, а статический миксин — это фрагменты информации, которые в противном случае были бы дублированы.


11) Объясните, что такое Sass Maps и для чего они нужны?

Карта Sass — это иерархически структурированные данные, а не просто набор переменных. Это может помочь в организации кода. Некоторые отличные варианты использования Sass:

  • Это очень полезно при работе со слоями элементов в вашем проекте.
  • Это может быть полезно при управлении цветом, когда имеется длинный список разных цветов и оттенков.
  • Используйте карту значков для различных значков социальных сетей, например: Facebook: «\e607» или Twitter: «\e602»
  • В отличие от других библиотек программирования, карта Sass будет состоять только из кода, который будет использоваться.

12) Объясните, чем комментарии Sass отличаются от обычного CSS?

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

Вопросы для собеседования по SASS/SCSS
Вопросы для собеседования по SASS/SCSS

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 и умеет использовать функции, писать примеси.
  • CSS можно легко преобразовать в Sass.
  • На протяжении всего проекта вам не придется повторять одни и те же операторы CSS с использованием атрибута @extend.
  • Это позволяет определять переменные, которые можно использовать на протяжении всего проекта.
  • Это сделает ваш адаптивный проект более организованным.

Минусы:

  • Требуется время для изучения новых функций препроцессора перед использованием.
  • Возможно, вы не сможете использовать встроенную функцию инспектора элементов браузера.
  • Устранение неполадок может быть затруднено

18) Объясните, что такое МЕНЬШЕ?

LESS — это язык создания динамических таблиц стилей. LESS — это препроцессоры CSS, расширяющие CSS за счет динамического поведения. Он позволяет использовать переменные, примеси, операции и функции. LESS работает как на стороне сервера, так и на стороне клиента.


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

Создание или сохранение файла LESS аналогично созданию/хранению файла CSS. Новый файл LESS можно создать с расширением .less или переименовать существующий файл .css в файл .less. Вы можете написать код LESS, используя существующий код CSS.

Лучший способ создать его внутри папки ~/content/ или ~/Styles/.


20) Какими способами можно использовать LESS?

  • Через npm LESS можно использовать в командной строке.
  • Скачать как файл скрипта для браузера
  • Для сторонних инструментов используется

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

меньше вопросов для интервью

LESS позволяет определять переменные. В LESS переменная представлена ​​как @sing. В то время как присвоение переменной выполняется с помощью: (двоеточия) Sing. Значения переменных вставляются в выходной файл CSS, а также в мини-файл.

 


22) Объясните, чем полезны миксины?

Миксины позволяют встраивать все свойства одного класса в другой класс, включая имя класса в качестве одного из его свойств. Это похоже на переменные, но для целых классов.


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
  • насыщение
  • hsvalue
  • red
  • зеленый
  • синий
  • альфа
  • яркости
  • яркость

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

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


27) Объясните, что такое «Исходная карта менее встроенная»?

Опция «Исходная карта меньше встроенной» указывает, что мы должны включить все файлы CSS в исходную карту. Это означает, что вам нужен только файл карты, чтобы добраться до исходного источника.


28) Объясните, для чего используется расширение «все» в LESS?

Когда вы указываете все ключевые слова последними в аргументе расширения, LESS сообщает, что нужно сопоставить этот селектор как часть другого селектора.


29) Объясните, что такое «StrictImports» в LESS?

StrictImports определяет, будет ли компилятор разрешать @import внутри блоков @media или других блоков селектора.


30) Перечислите различия между LESS и Sass?

Каждый язык таблиц стилей хорош со своей точки зрения и использования; однако есть несколько различий в их использовании.

МЕНЬШЕ пререкаться
– LESS использует JavaScript и обрабатывается на стороне клиента. – Sass кодируется на Ruby и поэтому обрабатывается на стороне сервера.
– Имена переменных начинаются с @symbol. – Имя переменной начинается с символа $.
– LESS не наследует несколько селекторов с одним набором свойств. – Sass наследует несколько селекторов с одним набором свойств.
– LESS не работает с «неизвестными» единицами измерения и не возвращает уведомление о синтаксической ошибке для несовместимых единиц измерения или синтаксической ошибки, связанной с математическими вычислениями. — Sass позволяет работать с «неизвестными» модулями, а также возвращает уведомление о синтаксической ошибке для несовместимых модулей.

31) В чем сходство между LESS и Sass?

Между LESS и Sass есть сходство.

  • Пространства имен
  • Цветовые функции
  • Миксины и параметрические миксины
  • Возможности вложения
  • JavaScript-оценки

32) Объясните, для чего используется &combinator?

&combinator объединяет вложенный селектор с родительским селектором. Это полезно для псевдоклассов, таких как :hover и :focus.


33) Объясните, для чего нужны операции в LESS?

Операции могут использоваться для выполнения таких функций, как

  • Простые математические операторы: +, – , *, /
  • Цветовые функции
  • Математические функции
  • С любой переменной размера или цвета можно работать.

34) Объясните, какая польза от Escape?

Использование экранирования в LESS

  • Когда вам нужно вывести CSS, который не является допустимым синтаксисом CSS
  • Собственный синтаксис, не распознаваемый LESS.
  • Компилятор LESS выдаст ошибку, если он не используется.
  • Простой префикс с символом ~ и заключенный в кавычки.

35) Что содержат элементы LESS?

Элементы Less содержат часто используемые примеси, такие как

  • .градиент
  • .округленный
  • .непрозрачность
  • .box-shadow
  • .Внутренняя тень

36) Перечислите альтернативы LESS?

  • SASS: синтаксически потрясающие таблицы стилей
  • SCSS: версия 2 SASS.
  • Стилус

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

Вы можете вызвать компилятор из командной строки в LESS как

$ lessc style.less

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

$ lesscstyles.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. После определения параметров миксинов вы получаете больше контроля над миксинами.

Минусы:

  • Чувствителен к пробелам
  • Нет встроенных правил
Поделиться

3 комментариев

  1. Аватара Майк говорит:

    Вопрос 17 спрашивает о плюсах и минусах SASS, но в ответе перечислены только плюсы и нет минусов.

    1. Алекс Сильверман Алекс Сильверман говорит:

      Спасибо, что обратили на это внимание, оно обновлено.

Оставьте комментарий

Ваш электронный адрес не будет опубликован. Обязательные поля помечены * *