Динамические переменные Sass

Ответ 1

Это основная тематика. Вы хотели бы использовать mixin или include для выполнения нескольких тем в одном файле CSS. Вот как вы это сделаете, используя:

_theme.scss

section.accent {
    background: $accent;
}

.foo {
    border: $base;
}

.bar {
    color: $flat;
}

main.scss

html {
  &.sunrise {
    $accent: #37CCBD;
    $base: #3E4653;
    $flat: #eceef1;

    @import "theme";
  }

  &.moonlight {
    $accent: #18c;
    $base: #2a2a2a;
    $flat: #f0f0f0;

    @import "theme";
 }
}

Вы можете так же легко сделать mixin, который принимает 3 цвета в качестве аргументов для использования вместо include:

@mixin theme($accent, $base, $flat) {
    // .. do stuff ..
}

Ответ 2

К сожалению, файлы Sass/Scss необходимо скомпилировать в файлы Css, чтобы их можно было поддерживать в вашем веб-браузере.

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

Это означает, что это не помогает изменить цвет переменной, в зависимости от того, какой класс включен в Html файл, потому что файл Css не будет содержать никаких переменных.

Единственный способ, которым вы могли бы это сделать, - это:

• чтение Html файла, чтобы узнать, какой класс был использован,
• чем изменение переменных шаблона Scss до нужного значения цвета
• и компиляция шаблона Scss в файл Css

Ответ 3

Если вы хотите использовать JavaScript, вы можете сделать это:

• Вам понадобится элемент HTML с идентификатором и классом (тот, который будет определять, какой цвет использовать).

  ...

• Далее вам нужно будет добавить JavaSript

  var CurrentColor = document.getElementById( "Target" ). className;

  if (CurrentColor == "sunrise" )

  { document.exampleTagg.style.exampleProperty = "# 37CCBD"; }

  else if (CurrentColor == "moonlight" )

  { document.exampleTagg.style.exampleProperty = "# 18c"; }

(первая строка объявит переменную, содержащую значение нашего элемента exampleTagg (тот, который содержит идентификатор "Target" ), тогда оператор if узнает имя нашего класса (восход или лунный свет) и последний, мы изменим фон нашего примераTagg на цвет, который нам нравится)

Чтобы использовать этот пример в ваших собственных целях, замените exampleTagg на некоторый реальный tagg и измените exampleProperty на допустимое свойство Css.

Обратите внимание, что вам не понадобится Scss для этого задания (вы все еще можете использовать его), потому что JavaScript будет обращаться к вашему скомпилированному файлу Css.