在SASS

訪問數組鍵我有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 ]; 
    } 
}

但這只是給了我以下錯誤：

Syntax error: Invalid CSS after "...color-collection": expected ";", was "[ $i ];"

我怎樣才能做到這一點？

來源

2013-02-26 MegaHit

與您的情況不完全相同，但方法應該證明有用：http://stackoverflow.com/questions/14695965/sass-increment-a-class-and-choose-the-next-variable-in-a -list/14696447＃14696447（使用@each） – steveax 2013-02-26 00:45:40

@steveax - 呃！這正是我想要避免的。那裏我可能會有超過30種顏色。把它們全部列出來，只是讓我想要回到香草CSS;我認爲這很乾淨。 – MegaHit 2013-02-26 00:49:36

您不必將它們列出兩次，只需將顏色名稱/值放在'$ color-collection'中，就像您擁有它們一樣，然後使用@each旋轉它們。在我連接的問題的情況下，他需要他們作爲你不需要的變數。有幾種方法可以讓貓和書櫃的答案很好。 – steveax 2013-02-26 01:12:10

$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); 
    } 
}

因爲這樣你可以傳遞任何顏色的對象。

來源

2013-02-26 00:47:51 bookcasey

完美！正是我想要的（儘管我不知道爲什麼你要在'for'循環中使用'length（$ color-collection）'而不是緩存的'$ color-count'）。 – MegaHit 2013-02-26 00:53:57

我想如果你打算在多個地方使用它，你可以把它保存爲一個變量。 :-) – bookcasey 2013-02-26 00:55:42

只有我要說的是，它需要從'1到長度（$ color-collection）'，因爲SASS'數組從'1'開始而不是'0'。 – 2014-01-07 17:28:52

剛剛遇到這個並經過測試的bookcasey的答案，效果很好，但我想使用顏色名稱作爲類;我發現這個代碼可以根據需要工作。

3210

使用＃{...}允許您使用功能爲好，所以如果你需要使用可能無法在規則直接使用的任意名稱，你可以使用

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

輸出：

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

希望這可以幫助別人！

來源

2013-12-08 05:54:18 JoshuaDoshua

可以使用@each規則，而不是@for，這是更多的語義，更快，它使代碼更短：

$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 reference for @each directive

來源

2013-12-09 16:36:22

我有類似的問題，並試圖亞歷克斯·格雷羅的解決方案。沒有工作，形成我造成輸出就像.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。

來源

2017-10-20 15:58:14

回答

相關問題