Синтаксис умови if / else в SCSS mixin


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
Будь ласка, дивіться відповідь Райана Джеймса - це набагато краще, ніж прийнятий на даний момент. =)
Квін Страль

Відповіді:


145

Ви можете спробувати це:

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

   @if $width == 'auto' {

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

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

Я не впевнений у бажаному результаті, але якщо встановити значення за замовчуванням, слід повернути помилкове значення.


5
так, дякую, я мав це за допомогою, " "але мені подобається автоматичне значення краще :) - не потрібно було встановлювати змінну, хоча я помістив її в синтаксис @mixin clearfix($width: auto) {...
mixin як вау

Чи є якась мета для надання $ width: auto; як значення за замовчуванням?
Кріш

222

Ви можете призначити значення параметрів за замовчуванням вбудованими під час першого створення файлу mixin:

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

  @if $width == 'auto' {

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

  } @else {

    display: inline-block;
    width: $width;

  }
}

23
Це має бути прийнята відповідь! Краще / чистіше використовувати параметр за замовчуванням.
Подумайте графічно

@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.