Sass (Syntactically Awesome Style Sheets) — это скриптовый язык, используемый для создания каскадных таблиц стилей (CSS-файлов). Его синтаксис очень похож на обычный CSS, но вдобавок он поддерживает использование переменных, вложенность, миксины и наследование для селекторов, чего очень не хватает в базовом CSS, ведь эти фичи незаменимы в организации и поддержке стилей вашего веб-приложения. В этой статье я продемонстрирую вам шаги, необходимые для добавления и настройки Sass в вашем ASP.NET Core проекте как в Visual Studio, так и в VS Code.
Sass — это инструмент для повышения производительности, который помогает вам выстраивать и поддерживать таблицы стилей. Среди основных его преимуществ можно выделить следующее:
Упрощенный синтаксис: благодаря таким фичам, как вложенность, переменные, миксины (mixins или примеси) и наследование, Sass позволяет писать CSS в более лаконичном и удобном для чтения формате. Это поможет сэкономить ваше время и сделать ваш код более удобным в сопровождения.
Реюзабельность: Sass позволяет вам писать код, который можно повторно использовать (например, миксины), и затем удобно применять его в вашем проекте. Благодаря этому вы можете уменьшить дублирование кода и сделать его более модульным.
Организация: Sass позволяет лучше организовывать код с помощью такой фичи, как партиалы (partials или частичные шаблоны), которая разбивает ваш код на более мелкие удобные в работе файлы. Это поможет упростить навигацию и отладку вашего кода.
Поддерживаемость: Sass значительно упрощает поддержку вашего кода (особенно на больших промежутках времени) благодаря таким фичам, как наследование и миксины, которые позволяют вам вносить изменения в ваши стили в одном месте, вместо того, чтобы обновлять целую кучу экземпляров одного и того же кода.
Совместимость: Sass совместим со всеми версиями CSS, поэтому, используя его, вы можете задействовать все новые фичи CSS, при этом не теряя совместимость со старыми браузерами.
В целом, использование Sass позволит вам писать лучший CSS быстрее, с меньшим количеством кода и куда меньшим количеством его дублирования. Это поможет вам сделать код более удобным в сопровождении и масштабировании и сэкономить кучу времени. И ко всему прочему у вас остается доступ ко всем самым последних фичам CSS.
Если вы только начинаете свое знакомство с Sass, то я настоятельно рекомендую вам взглянуть на это руководство, которое может послужить отличным введением в использование Sass в вашем приложении. Чуть позже я приведу пример с использованием Bootstrap Sass. Чтобы воспользоваться всеми преимуществами Sass, вам понадобится Sass-компилятор — инструмент, который обрабатывает ваши Sass-файлы и создает CSS, который сможет использовать ваше веб-приложение. Вы можете компилировать Sass из командной строки сразу после установки Sass или использовать расширение для управления этим процессом непосредственно из Visual Studio или VS Code. Расширения прекрасно работают с функцией Hot Reload как в Visual Studio, так и в VS Code, поэтому я также рассмотрю примеры работы с ними в обоих этих средах разработки.
Visual Studio
При работе в Visual Studio я использую расширение Web Compiler 2022+ от Джейсона Мура (Jason Moore). Это форк расширения, разработанного Мадсом Кристенсеном (Mads Kristensen) из Microsoft, модернизированный для работы с VS 2022. Добавить его можно, перейдя в пункт меню VS “Extensions” и нажав “Manage Extensions”. Затем убедитесь, что в левой части появившегося диалогового окна выбран параметр “Online”, и просто введите поисковый запрос “Web Compiler 2022”.
Работа с этим расширением так же проста как и его установка. Кликните правой кнопкой мыши по любому .scss-файлу и выберите в контекстном меню пункт “Web Compiler”. Затем выберите “Compile file”:
В результате первого запуска в корневом каталоге приложения будет создан файл compilerconfig.json, который, как вы, наверное, уже догадались, служит в качестве конфигурации Sass-компилятора. Изначально этот файл будет содержать всего одну запись для компилируемого вами файла, результат компиляции которого по умолчанию выводится в то же место с расширением .css.
[
{
"outputFile": "wwwroot/css/site.css",
"inputFile": "wwwroot/css/site.scss"
}
]Также по умолчанию включен минимизатор, поэтому там же вы должны увидеть и .min.css-файл:
Дефолтный режим работы компилятора настраивается в файле compilerconfig.json.defaults, который генерируется вместе с конфигурацией компилятора. Если, например, вы хотите отключить минимизатор, то вам нужно установить опцию enabled параметра minifiers:css в false:
"minifiers": {
"css": {
"enabled": false,
"termSemicolons": true,
"gzip": false
},
"javascript": {
"enabled": true,
"termSemicolons": true,
"gzip": false
}
}Это расширение также позволяет вам добавить компиляцию в качестве этапа сборки. Просто кликните правой кнопкой мыши на файл compilerconfig.json и выберите “Web Compiler” - “Enable compile on build…”
В результате будет установлен Nuget-пакет, который добавляет необходимый этап сборки.
Visual Studio Code
Live Sass Compiler — один из самых популярных компиляторов Sass для Visual Studio Code. Просто введите "live sass compiler" в маркетплейсе расширений:
Хоть эта версия и имеет всего около 800 тысяч загрузок (на момент написания статьи), это самая актуальная версия расширения. После установки перейдите в “File” > “Preferences” > “Settings”и снова введите поисковый запрос "live sass compiler", или найдите Live Sass Compiler в разделе расширений на панели “Commonly Used”. Таким образом вы откроете редактор настроек этого расширения.
Некоторые настройки можно задать прямо в появившемся окне, но большинство из них требуют редактирования файла settings.json. Поэтому кликните “Edit” в settings.json и добавьте следующее:
"liveSassCompile.settings.formats": [
{
"format" :"expanded",
"extensionName": ".css",
"savePath": "~/"
},
{
"format" :"compressed",
"extensionName": ".min.css",
"savePath": "~/"
}
],Таким образом вы настроите два формата вывода: первый создает стандартные css-файлы с пробелами и отступами. Второй генерирует минимизированную версию для использования в продакшене. Для обеих savePath (что представляет собой расположение .scss-файл, который мы компилируем) указан как ~/. Больше информации по настройкам и командам вы можете найти на странице проекта этого расширения на Github.
Использование Bootstrap Sass
Наконец мы подошли к небольшому примеру, иллюстрирующему, как с помощью Bootstrap Sass заставить расширения для компиляции scss-файлов в css генерировать цвета. Сначала загрузите исходные файлы Bootstrap (https://github.com/twbs/bootstrap/archive/v5.2.3.zip), а затем распакуйте содержимое папки scss в wwwroot/lib/bootstrap/dist/. Полученная в результате структура папок должна выглядеть следующим образом:
Далее переименуйте дефолтный файл site.css в site.scss, а затем измените его содержимое следующим образом:
@import "../lib/bootstrap/dist/scss/_functions.scss";
@import "../lib/bootstrap/dist/scss/_variables.scss";
html {
font-size: 0.9rem;
color: $blue-900;
}
@media (min-width: 768px) {
html {
font-size: 1rem;
}
}
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
background-color: $white;
}Первые две строки импортируют функции и переменные Bootstrap Sass и, в частности, позволяют использовать переменные для цветов. Как уже упоминалось ранее, в Visual Studio вы можете кликнуть правой кнопкой мыши по файлу site.scss и выбрать “Web Compiler” > “Compile file”. С этого момента расширения отслеживают любые изменения и при необходимости будут перекомпилировать файл. В VS Code вам нужно активировать компилятор, что можно сделать, просто нажав “Watch Sass” в строке статуса в нижней части IDE:
Прежде чем вы это сделаете, вам нужно добавить исключение в настройки, чтобы содержимое папки Bootstrap scss, которую вы только что добавили, не компилировалось:
"liveSassCompile.settings.excludeList":[
"/**/lib/bootstrap/dist/scss/**"
],После того, как вы все это сделаете, вы должны найти только что созданный файл site.css, в котором переменными цветов будут заменены на шестнадцатеричные цвета:
Заключение
Использование Sass может помочь вам создавать лучший CSS быстрее, с меньшим количеством повторений и обслуживания. В этой статье я показал, как интегрировать и настроить компиляцию Sass в проекте ASP.NET Core с помощью расширения Web Compiler в Visual Studio и расширения Live Sass Compiler в VS Code. Наконец, я продемонстрировал пример использования Sass, который использует переменные Bootstrap Sass для генерации шестнадцатеричных цветов в таблице стилей CSS.
Перевод статьи подготовлен в преддверии старта курса C# Asp.Net. По ссылке вы сможете подробнее узнать о курсе, а также зарегистрироваться на бесплатный урок.
