Создайте коллекцию (массив) в SASS для использования в цикле @for

Я изучаю SASS, и я пытаюсь передать коллекцию данных (массив ) в @mixin и обрабатывать на основе этого. У меня возникла проблема в определении структуры данных, чтобы передать значения в @mixin

Вот некоторый псевдокод:

@mixin roundcorners($collection) {

    $collectionLength = length(collection);

    @for($i from 0 to $collectionLength) {
        border-#{$collection[$i]}-radius: 9px;
    }

}

.mybox {

    @include roundcorners(['top-right','bottom-left']);

}

Желаемый результат будет следующим:

.mybox {
    border-top-right-radius: 9px;
    border-bottom-left-radius: 9px;
}

Ответ 1

Ближайшей вещью SASS к массиву является список, который вы можете перебирать с помощью директивы @each, например:

@mixin roundcorners($collection: (top-left, top-right, bottom-right, bottom-left), $radius: 0)
   @each $corner in $collection
     border-#{$corner}-radius: $radius

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#each-directive

Я использовал интерполяцию строк, чтобы отбросить значение записи списка в самом правиле - я не совсем уверен, что это законно, но я не на своем dev. чтобы проверить.

Я также использовал значения по умолчанию для аргументов, что означает, что вы можете перейти в пользовательский радиус. Если вы перейдете в любой угол в списке, вы очистите весь список по умолчанию (который, я думаю, вам нужен, но что-то нужно знать).

Другой, более простой способ сделать это может быть:

@mixin rounded($topLeft:false, $topRight:false, $bottomRight:false, $bottomRight:false)
  @if $topLeft != false
     border-top-left-radius: $topLeft
  @if $topRight != false
     border-top-right-radius: $topRight
  @if $bottomRight != false
     border-bottom-right-radius: $bottomRight
  @if $topLeft != false
     border-bottom-left-radius: $topLeft

Установив значения по умолчанию, вы можете вызвать этот микс, как:

@include rounded(false, 9px, false, 9px)

Использование "false" вместо 0 в качестве значения по умолчанию означает, что вы не создаете больше правил радиуса, чем вам нужно. Это также означает, что вы можете переопределить и установить углы назад на 0 радиус, если вам нужно.

Ответ 2

Вот как я решил это и позволяю вам устанавливать разные радиусы.

@mixin border-radius($radius:5px){
    @if length($radius) != 1 {
        $i:1;
        //covers older modzilla browsers
        @each $position in (topleft, topright, bottomright, bottomright) {
            -moz-border-radius-#{$position}:nth($radius, $i);
            $i:$i+1;
        }
        //Covers webkit browsers
        -webkit-border-radius:nth($radius, 1) nth($radius, 2) nth($radius, 3) nth($radius, 4);
        //Standard CSS3
        border-radius: nth($radius, 1) nth($radius, 2) nth($radius, 3) nth($radius, 4);
    } @else {
        -webkit-border-radius: $radius;
        -moz-border-radius: $radius;
        border-radius: $radius;
    }
}

Это означает, что вы можете установить одинаковый радиус:

@include border-radius(5px)

или иначе:

@include border-radius((5px, 0, 5px, 0))

Надеемся, что ваш сгенерированный CSS тоже будет кратким:)

Ответ 3

Используя код, предоставленный @Beejamin, я смог разработать следующее решение после устранения некоторых проблем с синтаксисом.

@mixin roundcorners($collection: (top-left, top-right, bottom-right, bottom-left), $radius: 0) {
    @each $corner in $collection {
        border-#{$corner}-radius: $radius
    }
}

@include roundcorners((top-right, bottom-left), 9px);

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