[英]Sass: Using two @each lists in SCSS
在我的CSS中,我必須創建引用“頭發顏色”和“發型”的類
我寫了一個mixin來幫助提高我的CSS編寫效率:
@mixin hair($hair, $colour) {
.hair-#{$colour} .#{$hair} {
background:image-url("xsppsfhair#{$hair}#{$colour}.svg") center top no-repeat,
image-url("xsppsheadgrey.svg") center top no-repeat,
image-url("xsppsbhair#{$hair}#{$colour}.svg") center top no-repeat;
}
}
@include hair(spikyboy, blonde);
@include hair(curlyafroboy, blonde);
這將產生以下CSS
.hair-blonde .spikyboy {
background: url('../images/xsppsfhairspikyboyblonde.svg?1348681869') center top no-repeat, url('../images/xsppsheadgrey.svg?1348834673') center top no-repeat, url('../images/xsppsbhairspikyboyblonde.svg?1348682005') center top no-repeat;
}
.hair-blonde .curlyafro {
background: url('../images/xsppsfhaircurlyafroblonde.svg?1348681869') center top no-repeat, url('../images/xsppsheadgrey.svg?1348834673') center top no-repeat, url('../images/xsppsbhaircurlyafroblonde.svg?1348682005') center top no-repeat;
}
很棒,但是由於我總共擁有35種頭發顏色和發型的組合,因此我仍然會遇到太多@includes的情況。
在此頁面上 ,它說SASS有一個@each,可用於循環瀏覽列表。 有一個進一步的例子在這里 。 但是,這兩個示例僅顯示了循環遍歷1個列表。 是否可以遍歷兩個列表?
我已經嘗試了許多代碼變體,但是似乎沒有一個奏效。 我以為以下內容肯定可以工作,但是我只是收到一條有關$ colour未定義的錯誤消息。
$hairstyle: (red, blonde, ltbrown);
$haircolour: (red, blonde, ltbrown);
@each $hair in $haircolour, $colour in $haircolour {
.hair-#{$colour} .#{$hair} {
background:image-url("xsppsfhair#{$hair}#{$colour}.svg") center top no-repeat,
image-url("xsppsheadgrey.svg") center top no-repeat,
image-url("xsppsbhair#{$hair}#{$colour}.svg") center top no-repeat;
}
.girl.hair-#{$colour} #eyelash {
background: image-url("xsppseyelash#{$colour}.svg") center top no-repeat;
}
}
有人可以給我一些有關我做錯事情的提示嗎?
您需要做的是在第一個循環中創建一個循環(我已經簡化了一點,因此更容易看到):
@mixin style-matrix($colors, $styles) {
@each $s in $styles {
@each $c in $colors {
.#{$s} .#{$c} {
background:image-url("xsppsfhair-#{$s}-#{$c}.svg");
}
}
}
}
$colors: blonde, brunette, auburn;
$styles: beehive, pixie, bob;
@include style-matrix($colors, $styles);
您得到以下輸出:
.beehive .blonde {
background: image-url("xsppsfhair-beehive-blonde.svg");
}
.beehive .brunette {
background: image-url("xsppsfhair-beehive-brunette.svg");
}
.beehive .auburn {
background: image-url("xsppsfhair-beehive-auburn.svg");
}
.pixie .blonde {
background: image-url("xsppsfhair-pixie-blonde.svg");
}
.pixie .brunette {
background: image-url("xsppsfhair-pixie-brunette.svg");
}
.pixie .auburn {
background: image-url("xsppsfhair-pixie-auburn.svg");
}
.bob .blonde {
background: image-url("xsppsfhair-bob-blonde.svg");
}
.bob .brunette {
background: image-url("xsppsfhair-bob-brunette.svg");
}
.bob .auburn {
background: image-url("xsppsfhair-bob-auburn.svg");
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.