Синтаксис условия if / else в миксине SCSS

106

Привет, я пытаюсь изучить SASS / SCSS и пытаюсь реорганизовать собственный миксин для clearfix

я бы хотел, чтобы миксин был основан на том, передаю ли я миксину ширину.

мысли до сих пор (только псевдокод, поскольку я буду включать другие миксины)

@mixin clearfix($width) {

   @if !$width {

    // if width is not passed, or empty do this

   } @else {

        display: inline-block;
        width: $width;
   }
}

вот как я думал, что могу назвать это, но это не работает.

@include clearfix();

или

@include clearfix(100%)

или

@include clearfix(960px)

Буду признателен за любую помощь в выборе лучшего или правильного способа сделать это!

conditional mixins sass if-statement Clairesuzy
источник

3

Пожалуйста, посмотрите ответ Райана Джеймса - он намного лучше, чем принятый в настоящее время. =)

Quinn Strahl

145

Вы можете попробовать это:

$width:auto;
@mixin clearfix($width) {

   @if $width == 'auto' {

    // if width is not passed, or empty do this

   } @else {
        display: inline-block;
        width: $width;
   }
}

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

простые темы
источник

5

да, спасибо, я использовал его, " "но мне больше нравится автоматическое значение :) - не нужно было устанавливать переменную, хотя я поместил это в синтаксис миксина как значение по умолчанию, @mixin clearfix($width: auto) {... спасибо :)

clairesuzy

Есть ли какая-то цель для указания $ width: auto; как значение по умолчанию?

Криш

222

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

@mixin clearfix($width: 'auto') {

  @if $width == 'auto' {

    // if width is not passed, or empty do this

  } @else {

    display: inline-block;
    width: $width;

  }
}

Райан Джеймс
источник

23

Это должен быть принятый ответ! Лучше / чище использовать параметр по умолчанию.

Think Graphical

@hellaFont: Пожалуйста, не добавляйте недействительные правки. Добавление кода или его изменение изменит смысл ответа. Замечания будет достаточно.

Брайан

10

Вы можете по умолчанию использовать параметр nullили false.
Таким образом, будет меньше времени проверять, было ли значение передано в качестве параметра.

@mixin clearfix($width: null) {

  @if not ($width) {

    // if width is not passed, or empty do this

  } @else {

    display: inline-block;
    width: $width;

  }
}

Квентин Верон
источник

Самый логичный ответ с наименьшим количеством голосов ... Мир нелогичен.

CPHPython

Синтаксис условия if / else в миксине SCSS

Ответы: