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

Question

Я изучаю 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;
}

Answer 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 / документы / yardoc / file.SASS_REFERENCE.html # каждая Директива

Я использовал интерполяцию строк, чтобы сбросить значение записи списка в самом правиле - я не совсем уверен, что это допустимо, но я не в моем 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 радиуса, если вам нужно.

Answer 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 также будет кратким

Answer 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);

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