Блог

Главная - Вопросы по программированию - Как создать несколько тем в функции sass unsing sass modules?

Как создать несколько тем в функции sass unsing sass modules?

#css #sass #module #themes

#css #sass #модуль #темы

Вопрос:

До того, как модули были введены в sass, вы могли создать тематическую таблицу стилей таким образом:

themeDark.scss:

 $color: black;

BaseButton.scss:

 button {
  color: $color;
}

button.scss:

 @import './_themeDark.scss'
@import './_baseButton.scss'

Теперь модули были введены в sass и @import становятся устаревшими. Как добиться того же эффекта с помощью модулей sass?

Я ищу решение, в котором некоторые файлы используются как частичные таблицы стилей. В главном файле они объединяются, чтобы сформировать окончательную таблицу стилей, которая будет импортирована.

Что я пробовал:

  • используйте @use вместо @import . Это не работает, потому что переменные из других модулей не видны.
  • используйте микшины. Проблема в том, что вам нужно передавать все переменные через аргументы, и это намного сложнее поддерживать, чем решение выше @import .

Комментарии:

1. Имейте в виду, что @use в настоящее время поддерживается только Dart Sass.

2. Я начинаю проект с Sass, и я хотел использовать этот новый синтаксис, но у меня точно такие же проблемы, как вы объяснили. Можете ли вы рассказать мне, как вы это решили? Спасибо.

3. @sevenlops прямо сейчас я использую оба: @use и @import (только для тем) вместе. Надеюсь, кто-нибудь сможет найти решение, которое будет работать после @import устаревания.

4. Можете ли вы установить эти значения с помощью переменных CSS вместо того, чтобы вставлять их в выходные данные с помощью Sass?

Ответ №1:

У вас может быть карта scss для хранения всех тем

 $themes: (
  theme1: (color: red),
  theme2: (color: orange),
  theme3: (color: yellow),
  theme4: (color: green),
  theme5: (color: blue)
);

Использование этой карты выполняется с @each циклом.

 @each $theme, $map in $themes {
  .#{$theme} {
    color: map-get($map, color);
  }
}

В каждом цикле присваивайте эти значения $theme и $map соответственно.

$theme — Название темы $map — Отображение всех переменных темы

Теперь вы используете map-get() функцию для получения любой переменной темы $map и вывода правильного свойства для каждой темы.

 @each $theme, $map in $themes {
  .#{$theme} amp; { // <--- Notice the amp; here!
    color: map-get($map, color);
  }
}