Синтаксис условия 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)

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


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
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.