Sass - вопросы для интервью

SASS (Syntactically Awesome Stylesheet) - это препроцессор CSS, который помогает уменьшить повторение с помощью CSS и экономит время. Это более стабильный и мощный язык расширения CSS, который четко и структурно описывает стиль документа.

• Это язык предварительной обработки, который предоставляет синтаксис с отступом (собственный синтаксис) для CSS.

• Это позволяет писать код более эффективно и легко поддерживать.

• Это супер-набор CSS, который содержит все функции CSS и представляет собой препроцессор с открытым исходным кодом, закодированный на Ruby.

• Он предоставляет стиль документа в формате хорошей структуры, чем плоский CSS.

• В нем используются повторно используемые методы, логические операторы и некоторые встроенные функции, такие как манипуляции с цветом, математика и списки параметров.

• Он более стабильный, мощный и совместим с версиями CSS.

• Это супер набор CSS, основанный на JavaScript.

• Он известен как синтаксический сахар для CSS, что означает, что он упрощает пользователю чтение или более четкое выражение вещей.

• Он использует собственный синтаксис и компилируется в читаемый CSS.

• Вы можете легко написать CSS меньшим количеством кода за меньшее время.

• Это препроцессор с открытым исходным кодом, который интерпретируется в CSS.

• Это позволяет писать чистый CSS в программной конструкции.

• Это помогает быстрее писать CSS.

• Это надмножество CSS, которое помогает дизайнерам и разработчикам работать более эффективно и быстро.

• Поскольку Sass совместим со всеми версиями CSS, мы можем использовать любые доступные библиотеки CSS.

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

• Разработчику требуется время, чтобы изучить новые функции, присутствующие в этом препроцессоре.

• Если на одном сайте работает большее количество людей, то будет использоваться тот же препроцессор. Некоторые люди используют Sass, а некоторые используют CSS для непосредственного редактирования файлов. Так что работать с сайтом станет сложно.

• Есть вероятность потерять преимущества встроенного в браузер инспектора элементов.

SASS поддерживает два синтаксиса, а именно SCSS и Indented синтаксис.

• В SCSS (Sassy CSS)- это расширение синтаксиса CSS, которое значительно упрощает обслуживание больших таблиц стилей и может распознавать синтаксис конкретного производителя и многие CSS. Файлы SCSS используют расширение.scss.

• В Indented является более старым синтаксисом и иногда просто называется Sass. Используя эту форму синтаксиса, можно кратко написать CSS. Файлы SASS используют расширение.sass.

Вы можете использовать SASS тремя разными способами:

• Как инструмент командной строки

• Как модуль Ruby

• Как плагин для Rack enable framework

Вложенность - это объединение разных логических структур. Используя SASS, мы можем комбинировать несколько правил CSS друг с другом. Если вы используете несколько селекторов, вы можете использовать один селектор внутри другого для создания составных селекторов.

Вы можете выбрать родительский селектор, используя &персонаж. Он сообщает, где должен быть вставлен родительский селектор.

SASS поддерживает селектор заполнителей с использованием селектора класса или идентификатора . В обычном CSS они указываются с помощью "#" или же ".", но в SASS они заменены на"%".

Есть 5 типов операций -

• Числовые операции

• Цветовые операции

• Строковые операции

• Логические операции

• Список операций

Он позволяет выполнять математические операции, такие как сложение, вычитание, умножение и деление.

Это позволяет использовать компоненты цвета наряду с арифметическими операциями.

Списки представляют собой серии значений, разделенных запятыми или пробелами.

Вы можете выполнять логические операции над сценарием Sass, используя операторы and или not.

Круглые скобки - это пара знаков, которые обычно выделяются круглыми скобками () или квадратными скобками [], что обеспечивает символическую логику, влияющую на порядок операций.

Он предоставляет переменные SassScript в селекторах и именах свойств, используя #{ }синтаксис. Вы можете указать имена переменных или свойств в фигурных скобках.

Вы можете установить значения по умолчанию для переменных, добавив флаг ! Default в конце значения переменной. Он не будет повторно назначать значение, если оно уже присвоено переменной.

Для импорта напрямую требуется имя файла, и все импортированные файлы будут объединены в один файл CSS.

Он устанавливает правило стиля для разных типов мультимедиа.

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

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

Он используется для выборочного выполнения операторов кода на основе результата вычисления выражения.

Операторы @else if используются с директивой @if, всякий раз, когда оператор @if терпит неудачу, проверяются операторы @else if, а если они также терпят неудачу, выполняется @else.

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

В директиве @each определена переменная, которая содержит значение каждого элемента в списке.

Он используется для определения миксинов, которые необязательно включают переменные и аргумент после имени миксина.

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

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

Есть два типа аргументов примеси -

• Аргументы ключевых слов

• Переменные аргументы

Он используется для включения аргументов в миксины. Названные аргументы могут передаваться в любом порядке, а значения аргумента по умолчанию могут быть опущены.

Переменные аргументы используются для передачи любого количества аргументов в mixin. Он содержит аргументы ключевого слова, переданные функции или миксину.

Используя директиву function, вы можете создать свою собственную функцию и использовать ее в контексте сценария или использовать с любым значением.

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

Вложенный стиль - это стиль SASS по умолчанию. Этот способ стилизации очень полезен, когда вы имеете дело с большими файлами CSS.

В расширенном стиле вывода каждому свойству и правилу соответствует отдельная строка. Занимает больше места по сравнению с вложенным стилем CSS.

Компактный стиль CSS занимает меньше места, чем расширенный и вложенный. Он фокусируется в основном на селекторах, а не на его свойствах.

Сжатый стиль CSS занимает меньше места по сравнению со всеми другими стилями. Он предоставляет пробелы только для разделения селекторов и новой строки в конце файла.

• Он использует отступы, а не{ и } для разграничения блоков.

• Для разделения операторов вместо точки с запятой (;) используются символы новой строки .

• Объявление свойства и селекторы должны быть размещены в отдельной строке, а операторы внутри{ и }должен быть помещен на новую строку и с отступом .

• Он использует отступы, а не{ и } для разграничения блоков.

• Для разделения операторов вместо точки с запятой (;) используются символы новой строки .

• Объявление свойства и селекторы должны быть размещены в отдельной строке, а операторы внутри{ и }должен быть помещен на новую строку и с отступом .

Свойства CSS можно объявить двумя способами:

• Свойства могут быть объявлены аналогично CSS, но без semicolon(;).

• colon(:) будет добавляться к каждому имени свойства.

Вы можете использовать = для директивы @mixin и + для директивы @include, которая требует меньше ввода и делает ваш код более простым и понятным.

sass - смотреть C: \ ruby ​​\ lib \ sass \ style.scss: style.css

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

sass input.scss output.css

• Сначала он проверяет байт Unicode, следующее объявление @charset и затем кодировку строки Ruby.

• Далее, если ничего не установлено, кодировка рассматривается как UTF-8 .

• Определите кодировку символов явно с помощью объявления @charset . Просто используйте «@charset encoding name» в начале таблицы стилей, и SASS будет считать, что это заданная кодировка символов.

• Если выходной файл SASS содержит символы, отличные от ASCII, он будет использовать объявление @charset .

Sass поддерживает два типа комментариев:

• Multiline comments- Они написаны с использованием / * и * /. Многострочные комментарии сохраняются в выводе CSS.

• Single line comments - Они написаны с использованием //с последующими комментариями. однострочные комментарии не сохраняются в выводе CSS.

Он оценивает выражение SassScript с помощью командной строки. Вы можете запустить оболочку с помощью командной строки sass вместе с параметром - i .

Он обнаруживает ошибки и отображает значения выражения SassScript в стандартный поток вывода ошибок.

Он отображает значение выражения SassScript как фатальную ошибку.