Проверка, определена ли переменная в SASS

Question

КАК заголовок говорит, что я пытаюсь проверить, определена ли переменная в SASS. (Я использую компас, если это имеет какое-то другое значение)

Я нашел Ruby-эквивалент:

defined? foo

дал выстрел в темноте, но он только что дал мне ошибку:

defined": expected "{", was "?

Я нашел обходной путь (который, очевидно, просто для определения переменной во всех случаях, что в данном случае на самом деле имеет больше смысла), но я бы очень хотел знать, возможно ли это в будущем

Answer 1

Для Sass 3.3 и выше

Начиная с Sass 3.3, есть функция variable-exists(). С список изменений :

• Теперь возможно определить существование различных конструкций Sass, используя эти новые функции:
  • variable-exists($name) проверяет, разрешается ли переменная в текущей области.
  • global-variable-exists($name) проверяет, существует ли глобальная переменная с указанным именем. ...

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

$some_variable: 5;
@if variable-exists(some_variable) {
    /* I get output to the CSS file */
}
@if variable-exists(nonexistent_variable) {
    /* But I don't */
}

---

Для Sass 3.2.x и более ранних версий (мой оригинальный ответ)

Сегодня я столкнулся с той же проблемой: попытаться проверить, установлена ​​ли переменная, и если да, добавить стиль, использовать миксин и т. Д.

Прочитав, что функция isset() не будет добавлена ​​в sass , я нашел простой обходной путь, используя ключевое слово !default:

@mixin my_mixin() {
  // Set the variable to false only if it's not already set.
  $base-color: false !default;

  // Check the guaranteed-existing variable. If it didn't exist 
  // before calling this mixin/function/whatever, this will 
  // return false.
  @if $base-color {
     color: $base-color;
  }
}

Если false является допустимым значением для вашей переменной, вы можете использовать:

@mixin my_mixin() {
  $base-color: null !default;

  @if $base-color != null {
     color: $base-color;
  }
}

Answer 2

Точно так же, как дополнительный ответ - вам нужно взглянуть на ключевое слово default для определенных случаев использования.Это дает вам возможность назначить значение по умолчанию для переменных, если они еще не определены.

Вы можете назначить переменные, если они еще не назначены, добавив флаг! Default в конецстоимости.Это означает, что если переменная уже была назначена, она не будет переназначена, но если у нее еще нет значения, ей будет присвоено значение.

Пример:

В specific-variables.scss у вас есть:

$brand: "My Awesome Brand";

В default-variables.scss у вас есть:

$brand: company-name !default;
$brand-color: #0074BE !default;

Ваш проект построен так:

@ import "specific-variables.scss";@import "default-variables.scss";@import "style.scss";

Значение бренда будет Мой потрясающий бренд , а значение цвета бренда будет # 0074BE .