如何使用SCSS改變基於人體類的類格式？

我正在製作一個在三個（或更多）不同上下文中使用的Web應用程序，並且我希望每個上下文都具有不同的配色方案。但是，當所有變化都是顏色時，我不希望維護三種不同的樣式表。如何使用SCSS改變基於人體類的類格式？

例如，假設主題是紅色，藍色和橙色。我的一個樣式表的說明鏈接的顏色：

a { 
    color: $some_color; 
}

我想根據塗在身上的類拆分此：

body.style1 { 
    a { 
    color: $red; 
    } 
} 

body.style2 { 
    a { 
    color: $blue; 
    } 
} 

body.style3 { 
    a { 
    color: $orange; 
    } 
}

你可以看到這是如何很快，如果你變得笨拙改變很多元素的風格。有沒有辦法做到這一點？

a { 
    &closest:body.style1 { 
    color: $red 
    } 
    &closest:body.style2 { 
    color: $blue; 
    } 
    &closest:body.style3 { 
    color: $orange; 
    } 
}

這樣我就可以用更清晰，更易維護的方式編碼我的scss。

來源

2014-05-11 Some Guy

有你嘗試過'body.style1＆{...}'？儘管如此，我真的不能告訴你是否擁有合法的「＆」。 –

Duplicate：http://stackoverflow.com/questions/14552529/dynamic-sass-variables或http://stackoverflow.com/questions/21882528/unexpected-results-when-using-extend-for-themes – cimmanon

這是什麼我更喜歡。定義一個mixin像body-style：

@mixin body-style($style, $map) { 
    body.#{$style} & { 
    @each $property, $value in $map { 
     #{$property}: $value; 
    } 
    } 
}

通過傳遞$風格樣式類的身體和$映射爲CSS鍵和值的地圖，然後使用這個對每個標記。

a { 
    @include body-style(style1, (
     color: red, 
     background: white 
    ) 
    ); 
}

它將返回：

body.style1 a { 
    color: red; 
    background: white; 
}

來源

2014-05-11 07:21:42 Mohebifar

它appers你不必有&第一，所以此工程（至少在3.2.10）：

a { 
    body.style1 & { 
    color: $red 
    } 
    body.style2 & { 
    color: $blue; 
    } 
    body.style3 &{ 
    color: $orange; 
    } 
}

來源

2014-05-11 07:32:02

如何使用SCSS改變基於人體類的類格式？

回答

相關問題