Ознакомиться с первой частью можно здесь.

Извлечение повторно используемого кода

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

@mixin center{
  display: flex;
  align-items: center;
  justify-content: center;
}

Обратите внимание, что каждое ключевое слово в Sass начинается с символа «@». Здесь мы использовали ключевое слово mixin, которое сообщает нашему компилятору Sass, что это блок кода, который можно где-то повторно использовать. Теперь, чтобы использовать этот блок, мы можем просто вызвать его где угодно, используя ключевое слово include и имя нашего миксина:

.outer{
  background-color: teal;
  width: 500px;
  height: 500px;
  @include center;
}

Переменные в Sass

Поскольку мы можем использовать переменные в CSS, мы также можем использовать их в Sass. Объявление переменной довольно просто, нам просто нужно поставить знак «$» перед именем переменной, и все готово:

$mainWidth: 500px;
$primaryBgColor: teal;

Пользоваться ими тоже довольно просто:

.outer{
background-color: $primaryBgColor;
width: $mainWidth;
//...

Разделение кода на отдельные файлы и импорт в Sass

Когда вы работаете над крупномасштабными проектами, вы, вероятно, используете массу Sass, и управление ими может быть довольно болезненным. Чтобы облегчить нашу работу, мы должны начать разделять наш код на более мелкие файлы, мы можем начать его с разделения переменных и миксинов на другие файлы. И, надеюсь, нам не нужно импортировать каждый файл в наши файлы компонентов js, вместо этого мы можем использовать встроенный импорт из Sass. Прежде всего, давайте разделим наши переменные и миксины.

Теперь мы можем импортировать наши миксины и переменные в наш файл scss:

@import "./mixins.scss";
@import "./variables.scss";

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

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

Я буду очень рад, если эта статья принесет вам какую-то пользу.