在sass中检查身体类

Question

我已经在sass中定义了一个变量，例如$ title-color：red现在我想根据身体的类来改变它，例如，在主页身上有类.home所以所有颜色头元素应该是红色的，如果它的身体有类.about那么该变量应该是绿色的。

我如何在SASS中实现这一点。

Answer 1

我会建议建立两个不同的变量：

$color-red: red; 
$color-green: green; 

$color-title-primary: $color-red; 
$color-title-secondary: $color-green; 

然后在您的文件：

body { 
    &.home { 
    h1, 
    h2, 
    h3 { 
     color: $color-title-primary; 
    } 
    &.about { 
    h1, 
    h2, 
    h3 { 
     color: $color-title-secondary; 
    } 
    } 
} 

可能有其他的解决方案，但我认为这是很容易理解和维护这样:)

Answer 2

你也可以在之后加一个＆符号一个sass的类

$background-default: white; 
$background-dark: black; 
$background-yellow: yellow; 

.card { 
    background: $background-default; 

    body.theme-dark & { 
    background: $background-dark; 
    } 

    body.theme-yellow & { 
    background: $background-yellow; 
    } 
} 

将呈现为CSS

.card { 
    background: white; 
} 

body.theme-dark .card { 
    background: black; 
} 

body.theme-yellow .card { 
    background: yellow; 
}