Разработайте стиль сайта с помощью Sass

Вы можете многое сделать с помощью CSS — возможно, больше, чем вы думаете — но у почтенного языка таблиц стилей есть свои ограничения. В современном веб-проекте с модулями npm, платформами JavaScript, ES6 и другими, может показаться анахронизмом возврат к написанию ванильного CSS.

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

Sass (синтаксически удивительные таблицы стилей) — один из самых популярных из этих. варианты — читайте больше с нашим гидом Что такое Sass? Sass добавляет много ценных новых языковых функций, которые (в настоящее время) недоступны в CSS, чтобы сделать ваши сайты и приложения более удобными в обслуживании. К ним относятся такие вещи, как миксины и управляющие директивы, которые звучат устрашающе, но на самом деле довольно просто, и мы рассмотрим их в этом руководстве.

На самом деле есть два разных синтаксиса для Sass, один из которых использует .scss расширение файла, и тот, который использует .sass. Первый из них больше похож на CSS (на самом деле все файлы .css являются действительными файлами .scss), а второй исключает скобки и точки с запятой CSS в пользу отступов и новых строк. Мы сосредоточимся на .scss, но выбор просто зависит от личных предпочтений.

Скачать файлы для этого урока можно здесь (выпуск 282)

01. Настройка компилятора

Для использования Sass требуется компилятор. Самый простой способ сделать это будет в командной строке. Вы можете сделать это, используя Homebrew. Компилятор Sass реализован на нескольких языках, и Homebrew установит версию Dart, которая является быстрой.

  brew install sass / sass / sass  

02. Создание файла Sass

Давайте попробуем создать простой файл Sass, чтобы увидеть компилятор в действии. Одним из самых простых понятий в Sass являются переменные, которые можно указывать один раз с префиксом $ и затем использовать в коде. Мы создадим sass-input.scss .

  $ text-color: #cccccc; body {color: $ text-color; }  

03. Компиляция командной строки

Теперь мы можем запустить компилятор Sass в командной строке, чтобы преобразовать наш файл .scss в вывод CSS. В выходном файле вы заметите, что переменные исчезли, и у нас остался стандартный синтаксис CSS, который можно использовать в браузере.

  sass sass-input.scss css-output.css  

04. Автоматизируйте сборку

Это замечательно, но вы не хотите запускать компилятор Sass вручную каждый раз, когда вносите изменения. Один из вариантов — заставить его прослушивать изменения файлов в каталоге и автоматически перекомпилировать вывод в другой каталог (с сохранением имен файлов). Это также позволяет эффективно отделять исходный файл .scss от встроенного CSS.

  mkdir src mkdir src / sass mkdir public mkdir public / css sass --watch src / sass /: public / css /  

05. Игра со стилем Sass

Теперь давайте посмотрим на простой стартовый сайт, который мы можем использовать, чтобы поиграть со стилем Sass. Мы можем начать с клонирования неустановленного примера сайта. Главное, что нужно отметить, это то, что наша HTML-страница ничего не знает о Sass. У него есть одна точка входа в файл CSS, которую мы создадим следующим.

  cd public curl -o index.html https: // raw. githubusercontent.com/simon-a-j/sass-tutorial / master / public / index.html  

06. Основная таблица стилей

Мы используем styles.css в качестве основной точки входа CSS, которую позже мы будем использовать для импорта других модулей. Это означает, что нам нужно указать Sass сгенерировать этот файл, поэтому нам также нужно создать файл styles.scss в нашей папке src / sass. Если вы используете sass —watch как и раньше, он автоматически скомпилируется в CSS в папке public / css и обновление вашего сайта покажет его изменения. Попробуйте внести некоторые изменения и обновить страницу HTML в браузере по ходу работы.

  // styles.scss body {font-family: sans-serif; выравнивание текста: по центру; }  

07. Управление цветовой схемой

Давайте посмотрим, как Sass может помочь мы управляем цветовую схему для сайта. Обычно для веб-страницы используется палитра из пяти или шести цветов. Мы можем вывести их из _colours.scss . Префикс подчеркивания говорит Sass не компилировать это в новый HTML-файл («частичный»). Но мы можем использовать его немного по-другому.

  // _colours.scss $ color-primary: # 231651; $ color-second: # 2374AB; $ color-light: # D6FFF6; $ color-highlight1: # 4DCCBD; $ color-highlight2: # FF8484;  

08. Используйте переменные цвета

Чтобы использовать эти переменные цвета, которые мы только что установили, мы можем сказать Sass импортировать содержимое _colours.scss в нашу основную таблицу стилей. Мы делаем это, используя оператор @import . Сделав это, обратите внимание, как переменные разрешаются в выходном файле CSS.

  // styles.scss @import «_colours.scss»; body {font-family: sans-serif; выравнивание текста: по центру; фон: линейный градиент (155 градусов, $ цвет-первичный 70%, $ цвет-вторичный 70%); цвет: $ color-light; минимальная высота: 100vh; } h1 {color: $ color-highlight1; } h2 {color: $ color-highlight2; }  

09. Стили вложения

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

  a {color: $ color-second; } .profile-header {a {font-size: 16px; поле слева: 10 пикселей; поле справа: 10 пикселей; набивка: 10 пикселей; радиус границы: 5 пикселей; цвет: $ color-light; background-color: $ color-second; }}  

10. Создание адаптивной сетки

Теперь давайте разместим наш контент в адаптивный формат сетки. У Sass есть несколько функций, которые значительно упрощают управление. Помимо использования переменных для указания наших точек останова, мы можем вкладывать запросы @media в другие стили, что делает поведение, специфичное для размера экрана, гораздо более читабельным.

  $ breakpoint: 800px ; .profile-body {display: flex; align-items: stretch; justify-content: пространство вокруг; margin-top: 32px; поле слева: 10vw; поле справа: 10vw; экран @media и (max-width: $ breakpoint) {flex-direction: column; }} .profile-section {background-color: $ color-highlight1; цвет: $ color-primary; поле: 16px; радиус границы: 10 пикселей; ширина: 340 пикселей; .profile-content {padding: 20px; } экран @media и (max-width: $ breakpoint) {width: 100%; }}  

11. Ввести mixins

Mix еще одна мощная функция Sass, которую вы можете рассматривать как способ определения повторно используемых функций таблицы стилей. Миксин определяется один раз, может принимать параметры, а затем может быть вызван в любом месте вашего кода Sass. Одним из вариантов использования этого является обработка префикса поставщика. Если мы хотим, чтобы преобразование CSS работало в старых браузерах, для этого может потребоваться, например, префикс -webkit для Chrome и Safari. Давайте определим миксин, который позаботится об этом для нас.

12. Миксины и переменные

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

  $ style1: (передний план: $ color-light, фон: цвет $ вторичный); $ style2: (передний план: $ color-primary, фон: $ color-highlight1); $ style3: (передний план: $ color-primary, фон: $ color-highlight2); @mixin content-style ($ foreground, $ background) {цвет: $ foreground; цвет фона: $ background; }  

13. Используйте свой новый миксин

  .profile-header {a {@include content-style ($ style1 ...); //…}} .profile-section {@include content-style ($ style2 ...); //…}  

14. Понимать наследование

Еще одна очень мощная особенность Sass — это наследование. Прямо сейчас у нас есть два разных стиля для ссылок на нашей странице. Если мы хотим использовать общие стили для обоих, а не для копирования и вставки CSS, почему бы нам не использовать класс-заполнитель, обозначенный как «%», который может быть расширен обоими, позволяя им наследовать его стили?

 % link-shared {font-size: 16px; поле слева: 10 пикселей; поле справа: 10 пикселей; набивка: 10 пикселей; радиус границы: 10 пикселей; }  

15. Расширение классов

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

  .profile-header {a {@extend% link-shared ; @include content-style ($ style1 ...); }} a {@extend% link-shared; @include content-style ($ style3 ...); }  

16. Изменить тему

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

  // _colours.scss $ color-primary: # 2E1F27; $ color-primary: светлый ($ color-primary, 25%); $ color-light: светлый ($ color-primary, 75%); $ color-highlight1: lighten (дополнение ($ color-primary), 50%); $ color-highlight2: светлее (дополнение ($ color-second), 50%);  

17. Выберите новый набор цветов

Теперь мы можем изменить всю цветовую схему для сайта, просто указав новое первичное значение цвета в файле _colours.scss . Попробуйте, экспериментируя с альтернативными цветами. Мы могли бы также сделать так, чтобы Sass рандомизировала его (но помните, что это относится к моменту создания вашего сайта, а не времени выполнения). Вы также можете попробовать настроить логику, которую мы используем для получения других цветов в теме из основного.

  $ red: random (255); $ зеленый: случайный (255); синий цвет: случайный (255); $ color-primary: rgb ($ red, $ green, $ blue);  

18. Использование библиотек

Модульная система Sass также позволяет очень просто использовать сторонние библиотеки с минимальными усилиями и без отправки больших исполняемых файлов конечным пользователям. Давайте попробуем библиотеку Angled Edges, которую мы можем использовать для создания наклонных ребер для объектов на нашей странице.

  git clone https://github.com/josephfusco/ angled -dge.git src / sass / angled-edge  

19. Mixin Angled Edges

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

  @import «angled -dge / _angled -dge.scss»; .profile-section {@include angled-edge («снаружи внизу», «внизу справа», $ color-highlight1); @include angled-edge («снаружи сверху», «справа вверху», $ color-highlight1); поле: 120px 16px 120px 16px; // ...}  

20. Форматирование вывода

Давайте закончим, посмотрев на выходные данные, которые генерирует Sass. Если вы отслеживали свои CSS-файлы, когда мы вносили изменения, вы заметите, что они остаются вполне читабельными. Тем не менее, вы также можете создать сжатый CSS для Sass, который менее читабелен, но готов к отправке. Вы можете сделать это, используя флаг командной строки —style .

  sass src / sass /: public / css / --style сжатый  

21. Подробнее Sass

Сейчас мы изучили довольно много функций Sass, и наш сайт выглядит не так уж плохо. Надеюсь, вы начинаете понимать, как Sass помогает нам разрабатывать более удобные таблицы стилей. Мы не рассмотрели все возможности языка — в него входит много других полезных функций, а также такие расширенные функции, как директивы управления (такие как @if @for и [19459021)] @ while ), которые часто используются для создания сложных библиотечных функций. В целом, помните, что Sass — это полностью стилистическое предпочтение. Вы можете делать все, что мы видели, с чистым CSS, если хотите, но вы должны определенно подумать о предварительной обработке, поскольку ваша работа становится более сложной.

Эта статья была первоначально опубликована в выпуске 282 из Веб-дизайнер . Купите выпуск 282 или подписывайтесь здесь .

" ["] "] [1945904590] [1945904590] [1945904590] [1945904590] "