Доступ к массиву в SASS

У меня есть список в SASS, и я пытаюсь получить доступ к элементам с помощью скобок:

$collection[1];

но это дает мне ошибку.

Есть ли другой способ сделать это?

Почему я хочу это сделать?

У меня есть список цветов, которые должны быть установлены на разных элементах в соответствии с цветами, назначенными им сервером. Разметка имеет пронумерованные классы (color-0, color-1 и т.д.). Здесь CSS, к которому я стремился:

.color-0 { color: red }
.color-1 { color: orange }
.color-2 { color: green }
.color-3 { color: blue }
/* many more, with more complex colors... */

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

$color-collection: ('red', 'orange', 'green', 'blue');
$color-count: length($color-collection);

@for $i from 0 to $color-count {
    .color-#{$i} {
        color: $color-collection[ $i ];
    }
}

но это просто дает мне следующую ошибку:

Синтаксическая ошибка: неверный CSS после "... color-collection": ожидается ";", был "[$ i];"

Как я могу это сделать?

Ответы

Ответ 1

$color-collection: ('red', 'orange', 'green', 'blue');

@for $i from 0 to length($color-collection) {
    .color-#{$i} {
        color: unquote(nth($color-collection, $i+1));
    }
}

Используйте nth(), также unquote(), если вы хотите передать цитируемые строки.

Хотя, я лично не хотел:

$color-collection: (red, rgba(50,50,80, .5), darken(green, 50%), rgba(blue, .5));

@for $i from 0 to length($color-collection) {
    .color-#{$i} {
        color: nth($color-collection, $i+1);
    }
}

Потому что тогда вы можете передать любой цветной объект.

Ответ 2

Вместо @for вы можете использовать правило @each, которое более семантично, быстрее и делает код короче:

$color-collection: (red, orange, green, blue);

@each $color in $color-collection {
    .color-#{$color} {
        color: $color;
    }
}

Или, если вы предпочитаете, вы можете использовать $color-collection список непосредственно в директиве @each:

@each $color in red, orange, green, blue {
    .color-#{$color} {
        color: $color;
    }
}

Поскольку @bookcasey говорит, что предпочтительнее использовать строки без кавычек, потому что тогда вы можете передать любой цветной объект или функцию

Ссылка Sass для директивы @each

Ответ 3

только что наткнулся на этот и проверенный книжный ответ, который работает хорошо, но я хотел использовать название цвета как класс; Я обнаружил, что этот код работает так, как мне нужно.

$colors: ( 'black', 'white', 'red', 'green', 'blue' );

@for $i from 0 to length($colors) {
    $thisColor: unquote(nth($colors, $i+1));
    .color-#{$thisColor} {
        color: $thisColor;
    }
}

используя # {...}, вы также можете использовать функции, поэтому, если вам нужно использовать произвольное имя, которое не может использоваться напрямую в правилах, которые вы могли бы использовать

@for $i from 0 to length($colors) {
    .color-#{unquote(nth($colors, $i+1))} {
        // some rules that don't actually use the var
        // so there no need to cache the var
    }
}

выход:

.color-black { color: black; }
.color-white { color: white; }
.color-red { color: red; }
// etc..

Надеюсь, это поможет кому-то еще!

Ответ 4

У меня была аналогичная проблема и я попробовал решение Алекс Герреро. Не работало, потому что вывод был как .color-gray:{gray}; вместо .color-1:{gray};. Поэтому я немного изменил его и выглядел так:

$color-pallete: (gray, white, red, purple)

$i: 0
@each $color in $color-pallete
    .color-#{$i}
        color: $color
    $i: $i + 1

О, вы. Я использую SASS, а не SCSS.