Ознакомиться с первой частью можно здесь.
Извлечение повторно используемого кода
Как и в большинстве языков программирования, вы можете извлекать фрагменты своего кода, чтобы сделать его пригодным для повторного использования. В 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, вместо этого она получит их прямое значение.
Я буду очень рад, если эта статья принесет вам какую-то пользу.