Лучшие практики SASS: 9 советов по интерфейсу для препроцессоров CSS

Серия SASS для начинающих

• SASS для CSS: совершенствуйте свои навыки интерфейса с помощью препроцессора CSS

• Лучшие практики SASS: 9 советов по интерфейсу для препроцессоров CSS

• Учебное пособие по Sass: модульное тестирование с помощью Sass True

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

Инструмент, называемый препроцессором CSS, предлагает решение некоторых проблем при работе с CSS как он масштабируется. SASS, Syntactically Awesome Style Sheets , является одним из самых популярных препроцессоров CSS, рожденным как ответ на эту проблему.

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

Сегодня мы рассмотрим:

• Введение в SASS
• Архитектура SASS
• Переменные в SASS
• Использование интерполяции
• Расширения SASS
• Примеси SASS
• Импорт и другие at-правила
• Вложение в SASS
• Использование-SASS-Modules
• Начало работы с проектом

Поднимите свои навыки CSS на новый уровень.

Изучите продвинутые навыки CSS: миграция существующей кодовой базы CSS, настройка всего проекта с нуля и многое другое.

Sass для CSS: расширенная разработка интерфейса

Введение в SASS

Как упоминалось выше, SASS — это препроцессор CSS. Препроцессоры CSS появились в результате того, что веб-страницы становились все более и более сложными, поскольку их CSS вырос до сотен строк кода. Чтобы помочь предотвратить ошибки в таблицах стилей и упростить написание CSS, был создан SASS. SASS расширяет то, что CSS уже дает нам , а затем позволяет нам использовать функции, переменные, вложение и другие инструменты SASS для упростить написание стилей.

Чтобы установить SASS, вы можете использовать предпочитаемый вами менеджер пакетов, чтобы установить его глобально:

 //yarnyarn global add sass //npmnpm install -g sass  

Устанавливает JS-реализацию SASS. Согласно документации, это может работать медленнее, чем другие реализации (например, Ruby-Sass или Dart-Sass). Если все остальное, вы сможете поменять реализации позже, если вам понадобится повысить скорость работы.

Хорошо! Мы готовы использовать SASS на нашей машине. Чтобы запустить сервер наблюдения, чтобы CSS изменялся каждый раз, когда вы вносите изменения в файлы Sass, используйте следующий синтаксис:

  sass --watch    

Входные и выходные файлы SASS — это относительные пути к файлу из текущего каталога, в котором вы находитесь. Чтобы использовать входной каталог sass и выходной каталог css:

  sass --watch src/sass: src/css  

- смотреть флаг позволяет автоматически компилировать изменения при изменении кода.

Архитектура SASS

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

  sass/|| - utilities/|  - _variables.scss |  - _mixins.scss |  - _extends.scss || - сбросить/|  - _reset.scss |  - _typography.scss || - компоненты/|  - _example0.scss |  - _example1.scss |  - _example2.scss || - layout/|  - _example0_layout.scss |  - _example1_layout.scss |  - _example2_layout.scss || - pages/|  - _home.scss |  - _settings.scss |  - _another_page.scss || - сторонний-css/|  - _bootstrap.scss | - main.scss  

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

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

Обычно это какой-то основной . Файл scss создается в корне папки sass, в которую импортируются все остальные файлы. Эти файлы перечислены в том порядке, в котором вы хотите применить стиль. Каскадный характер CSS по-прежнему применяется.

Переменные в SASS

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

Обычно мы привыкли видеть переменную CSS следующим образом:

 : root {--main-color: # 000000;  --main-bg: #FAFAFA;} тело {фон: var (- main-bg);  color: var (- main-color);}  

Вот как это будет выглядеть с использованием SASS:

  $ main  -color: # 000000; $ main-bg: #FAFAFA; body {background: $ main-bg;  color: $ main-color;}  

SASS использует $ для указания переменной вместо - . Вместо синтаксиса var () CSS, SASS использует тот же синтаксис, что и для присвоения значения переменной. Это очень хорошо работает, когда у нас есть система дизайна и мы хотим сохранить согласованность цветов, размеров заголовков и семейств шрифтов.

Если когда-либо возникнет необходимость изменить систему дизайна, вам понадобится только чтобы изменить его в файле переменных вместо того, чтобы искать каждое место, в котором вы указали цвет. Вот почему важно, чтобы переменные назывались в соответствии с их _function_ , а не _description_ .

Если вы называете свою переменную _ $ purple_ , например, будет иметь смысл только то, что цвет, связанный с этим именем переменной, будет пурпурным. Это устраняет цель использования переменных в CSS или SASS.

Вместо фиолетового давайте использовать _ $ main-bg_ и присвоить значение _ $ main-bg_ на фиолетовый. Это позволяет нам использовать общий термин для нашей переменной в наших таблицах стилей, оставляя объявление переменной в одном месте, чтобы мы могли сэкономить время на его последующее изменение, если это необходимо.

Использование интерполяции

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

Мы можем легко сделать это в SASS с помощью интерполяции и миксинов:

  @mixin icon-name ($ name) {.icon - # {$ name} {background-image: url ("../images/# {$ name} .png);}}   

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

Расширяется в SASS

Функция расширения в SASS может быть полезна для сохранения ваших таблиц стилей СУХИМИ, позволяя селекторы для наследования свойств.

Синтаксис следующий:

 % button-shared {//имя расширения//здесь идут свойства CSS  }//позже в scss: button {@extend% button-shared}  

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

  button.warning {border-color: red;  color: red;}  

Миксины в SASS

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

  @mixin flexContainer ($ direction, $ justify, $ align) {display: flex;  flex-direction: $ direction;  justify-content: $ justify;  align-items: $ align;}. main-container {@include flexContainer (column, center, center);}  

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

Импорт и другие правила at

Правило @import расширяет возможности импорта CSS и дает нам возможность добавлять другие таблицы стилей SASS и CSS, чтобы объединить все стили в один файл. Импорт SASS обрабатывается во время компиляции, в отличие от импорта CSS, который обрабатывается с помощью HTTP-запроса.

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

 //используя @ import @ import 'folder/name-of-file';//используя @ use @ use 'folder/name-of-file';  

Как видите, это по сути тот же оператор/at-rule — единственное, что изменилось. Большинство различий происходит под капотом, чтобы улучшить работу импорта. Большинство изменений отражают повышение эффективности и производительности.

Вложенность в SASS

Вложенность — одна из самых узнаваемых функций SASS. В отличие от CSS, где каждый селектор имеет свой собственный блок свойств CSS, SASS допускает вложение в виде HTML-документа. Это одна из важнейших функций SASS, которая действительно улучшит СУХОЙ код.

Щелкните вкладки, чтобы сравнить, как этот код будет выглядеть в CSS и SASS..

CSS
CSS
• путь> CSS
путь> SASS
• SASS

Мы видим, что вложение соответствует структуре документа HTML, упрощая соблюдение правил селектора при обнаружении ошибок. Вместо того, чтобы переписывать HTML-элемент или имя класса с эффектом наведения, мы используем & , чтобы указать, что имя тега расширяется до следующего селектора.

Использование модулей SASS

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

• sass: color — функция, которая может осветлить или затемнить цвет.
• sass: list — функция, которая может выполнять методы списка/массива.
• sass: math — ограничивающая функция и константы, найденные в математике (например, _pi_ и _e_ )
• sass: string — строковый метод, не слишком отличающийся от стандартных строковых методов.

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

  @use "sass: color"; button {color: color. светлее (# 000000, 20%);}  

Начало работы с проектом SASS

Вот простое приложение, использующее React-Bootstrap и SASS, чтобы показать, как использовать некоторые функций SASS. Чтобы увидеть, как это работает, все, что вам нужно сделать, это добавить свой собственный API_KEY из TMDB в файл .env . Щелкните ссылку CodeSandbox ниже, чтобы начать работу.

Я бы порекомендовал либо:

1. Возьмите это приложение, разветвите его и проведите рефакторинг без использования React-Bootstrap. Используйте SASS для всех ваших стилей.

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

Прыгать прямо и использовать эти новые технологии — лучший способ справиться с ними!

Чему научиться дальше

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

• Управляющие директивы
• Заполнители
• SASS 7-1 шаблон
• Создание процессов сборки
• Настройка медиа-запросов в SASS
• Модульное тестирование и SASS True
• и многое другое.

Чтобы перейти к этим продвинутым концепциям, ознакомьтесь с учебным курсом Sass for CSS: Advanced Frontend Development , чтобы охватить все эти концепции и методы. , и больше. К концу вы получите глубокие знания о SASS. Вы сможете перенести существующую кодовую базу CSS, а также настроить весь проект (и процесс сборки) с нуля.

Удачного обучения!

Продолжить чтение о разработке внешнего интерфейса

• Учебное пособие по Sass: модульное тестирование с помощью Sass True
• React Учебное пособие по загрузке: обновите приложения React с помощью CSS-фреймворка.
• Обновите свои навыки работы с интерфейсами: практические занятия с HTML5 и CSS3