Руководство для начинающих по SASS

Легко изучите самый популярный препроцессор CSS

Необходимое условие: базовые знания CSS

В течение следующих 7 минут мы научимся писать SASS. Написание стилей в SASS может помочь нам стать более продуктивными и организованными разработчиками — и это действительно замечательный инструмент для обучения разработчиков.

Давайте прыгнем в него.

Прежде всего, что такое SASS?

SASS — очень популярный препроцессор CSS. Аббревиатура расшифровывается как Syntactically Awesome Style Sheets.

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

Подготовка

Когда мы связываем таблицы стилей CSS с нашим HTML, мы всегда делаем что-то вроде:

<link rel="stylesheet" type="text/css" href="=style.css">

Когда мы используем SASS, мы не можем просто написать href="style.scss". Мы не можем напрямую связать файлы SASS.

Это невозможно, потому что SASS — это язык сценариев. Это не CSS. С помощью расширений или модулей NodeJS файлы SASS можно преобразовать в пригодный для использования CSS. И мы можем связать эти сгенерированные файлы CSS с нашим HTML.

Почему бы тогда просто не использовать CSS? В чем смысл? SASS предоставляет дополнительную функциональность, расширяющую возможности CSS. И ты увидишь это очень скоро.

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

Сначала мы собираемся открыть Visual Studio Code. VS Code, вероятно, сейчас самый популярный текстовый редактор, и вы найдете множество руководств по использованию этого прекрасного программного обеспечения. Основная причина заключается в том, что в этом текстовом редакторе доступно множество полезных расширений, упрощающих кодирование.

Примечание. VS Code полностью отличается от Visual Studio. Вы можете установить Visual Studio Code здесь.

После того, как VS Code открыт, вы хотите посмотреть на боковую панель слева и щелкнуть вкладку расширений.

В строке поиска найдите «Live Sass Compiler». Как указано в описании, расширение может компилировать .sass и .scss — оба из которых являются расширениями файлов SASS — в файлы .css.

После установки расширения мы готовы к работе.

Создать SASS-файл

Как упоминалось выше, файлы SASS могут заканчиваться на .sass или .scss. В этом руководстве мы работаем исключительно с .scss. И да, есть разница. Синтаксис другой.

Давайте создадим файл style.scss.

В самом низу, если вы успешно установили правильное расширение, вы должны увидеть кнопку с надписью «Смотреть Sass». Если вы не видите эту кнопку, убедитесь, что в данный момент вы просматриваете файл .scss. При нажатии на эту кнопку произойдет несколько вещей:

• Будут созданы два файла: файл css и файл css.map. Не прикасайтесь ни к одному из них.
• Каждый раз, когда вы записываете новые стили в свой файл scss и нажимаете «Сохранить», он преобразует эти инструкции sass в CSS. И это преобразование будет сохранено в файле css. Файл CSS будет постоянно перезаписываться. Он не добавляется в файл CSS. Каждый раз перезаписывает.

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

Переменные

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

Переменные полезны, если вы повторяете значения в таблице стилей. Например, представьте, что вы устанавливаете цвет фона для множества различных элементов на красный. Что, если бы вы захотели изменить их все на синие? Вместо того, чтобы менять каждый фоновый цвет на синий один за другим, вы можете просто использовать переменную и изменить только значение этой переменной.

Чтобы создать переменные, мы просто пишем знак доллара, за которым следует имя переменной. И затем мы можем присвоить этим переменным значение, как показано ниже:

А затем, чтобы использовать эти переменные, мы просто вызываем их.

Карты

Карты похожи на переменные, поскольку они содержат значимые данные и информацию. Единственное отличие состоит в том, что карты могут содержать пары ключей и значений. В приведенном выше примере карта содержит ключи: яблоко, банан и апельсин, а также их соответствующие цвета в качестве значений.

Как показано в нижней части примера кода, мы используем функцию map-get() для извлечения значений из карт. Параметрами функции map-get являются имя карты и ключ.

Также есть map-set(map, key) , map-has-key(map, key) и map-remove(map, key). Соответственно, он может создавать новые ключи, определять, существует ли ключ, или удалять ключ с карты.

Чтобы узнать больше о других функциях карты, посетите раздел Школы W3.

Комментарии

В простом CSS вы можете создавать комментарии только с помощью /**/. Кроме того, в SASS вы также можете создавать однострочные комментарии, используя //.

Вложение

В простом CSS у нас есть комбинаторы CSS.

Используя селекторы потомков (как показано выше), дочерние селекторы и смежные селекторы, пример CSS, показанный выше, полностью действителен.

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

В SASS мы можем укротить хаос с помощью вложенности. Пример кода выше можно преобразовать в пример кода, показанный ниже:

Это довольно прямолинейно. Мы просто вкладываем селекторы потомков в родительские селекторы.

Это работает с селекторами элементов, селекторами классов, селекторами идентификаторов и так далее. Обязательно попробуйте.

примеси

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

Чтобы создать миксин, начните с @mixin, за которым следует имя миксина. Имя — это то, как вы будете ссылаться на миксин. Затем в фигурных скобках вы определяете инструкции CSS. И когда вы действительно захотите использовать эти инструкции (они же миксины), включите их, как показано. Начните с @include, за которым следует имя миксина.

Итак, теперь селектор p примет все стили CSS, предлагаемые миксином.

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

Продлевать

Еще один способ избежать написания одного и того же кода снова и снова — это @extend в SASS. По сути, это то же самое, что миксин.

Допустим, у вас есть класс с именем gallery-container, и мы определяем инструкции по стилю для этого класса.

И у нас также есть класс под названием picture. Давайте представим, что по какой-то причине мы хотим, чтобы класс изображения наследовал те же инструкции по стилю, что и gallery-container. Мы бы использовали @extend, как показано выше.

И если вы хотите перезаписать какие-либо стили (для @extend или @include), просто напишите их под @extend или @include. Например, если бы мы хотели иметь другую высоту строки для класса изображения, мы бы просто написали:

Итак, когда вы должны использовать примеси, а когда расширять? Это полностью зависит от вас. Делай что хочешь и хорошо проводи время.

Частицы

SASS позволяет импортировать таблицы стилей SASS и использовать любые инструкции SASS (функции, примеси, переменные), найденные в этих импортированных таблицах стилей SASS.

Представьте, что следующий пример кода был найден в _example.scss

И представьте, что следующий пример кода был найден в main.scss.

Обратите внимание, как селектор класса расширяет .gallery-container, несмотря на то, что .gallery-container в этом файле не существует. Это стало возможным благодаря самой первой строке.

Мы импортируем файл _example.scss, чтобы использовать инструкции SASS, содержащиеся в этом файле. Надеюсь, это имеет смысл.

Еще одна очень важная вещь, на которую следует обратить внимание, — это имя файла.

Обратите внимание, как мы назвали его _example.scss. Я подчеркиваю подчеркивание. Подчеркивание в основном говорит компилятору не создавать файл CSS для этой таблицы стилей SASS. Ваш компилятор создаст CSS-эквивалент main.scss, но не сделает того же для _example.scss. Файлы SASS, начинающиеся со знака подчеркивания, называются Partials. Мы хотим создать партиалы для файлов SASS, которые мы просто импортируем. Другими словами, если вы хотите импортировать файлы SASS, эти импортированные файлы должны начинаться с символа подчеркивания.

Также обратите внимание, что когда мы используем @import, мы не пишем расширение файла .scss и не пишем символ подчеркивания. Это очень важно.

Если вы хотите узнать об этом больше, вы можете ознакомиться с официальной документацией SASS.

Операции

Помните, мы говорили, что SASS — это язык сценариев? И мы упоминали, что это не CSS?

С SASS вы можете выполнять математические операции. Вы можете складывать, вычитать, умножать, делить или находить модуль. Вы можете выполнять эти математические операции с переменными SASS или простыми числами.

Вот пример этого. Кроме того, вам не обязательно использовать одни и те же единицы измерения. Вы можете вычитать проценты с пикселями. Или единицы rem с единицами высоты обзора. Сходить с ума.

Условные

Еще одна очень логичная особенность SASS — условные операторы. Есть: если, еще-если и еще. Это выглядит так:

Возможности безграничны.

Функции

И, наконец, SASS предлагает функции. Вы можете добавить параметры, если хотите. Вы можете передавать значения, а также можете возвращать значения. Просто используйте @function.

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

Если вам нужны более подробные объяснения или вы готовы узнать больше о SASS, ознакомьтесь с официальной документацией.