为主题颜色创建混合

我已经设置了一个body类作为目标页面的句柄并通过我的样式表应用正确的颜色。身体类是例如<body class="theme-red">和我目前在我的SCSS文件中设置了以下类：为主题颜色创建混合

.theme-border-colors { 
    .theme-tourquoise & { 
     border-color:$turquoise; 
    } 
    .theme-red & { 
     border-color:$red; 
    } 
    .theme-yellow & { 
     border-color:$yellow; 
    } 
    .theme-green & { 
     border-color:$green; 
    } 
    .theme-blue & { 
     border-color:$blue; 
    } 
    .theme-brown & { 
     border-color:$brown; 
    } 
    .theme-pink & { 
     border-color:$pink; 
    } 
} 
.theme-background-colors { 
    .theme-tourquoise & { 
     background-color:$turquoise; 
    } 
    .theme-red & { 
     background-color:$red; 
    } 
    .theme-yellow & { 
     background-color:$yellow; 
    } 
    .theme-green & { 
     background-color:$green; 
    } 
    .theme-blue & { 
     background-color:$blue; 
    } 
    .theme-brown & { 
     background-color:$brown; 
    } 
    .theme-pink & { 
     background-color:$pink; 
    } 
} 
.theme-font-colors { 
    .theme-tourquoise & { 
     color:$turquoise; 
    } 
    .theme-red & { 
     color:$red; 
    } 
    .theme-yellow & { 
     color:$yellow; 
    } 
    .theme-green & { 
     color:$green; 
    } 
    .theme-blue & { 
     color:$blue; 
    } 
    .theme-brown & { 
     color:$brown; 
    } 
    .theme-pink & { 
     color:$pink; 
    } 
}

可以一个混合制成需要我SCSS文件时纳入所有这3。我当前@extend .theme-font-colors等

来源

2014-01-21 Rob Morris

如果您知道它的工作原理，那么您目前有什么问题？ – cimmanon

什么都没有！只是想知道它是更有效率还是可能是混合？扩展所有三个类都很好。 –

您可以创建名称和颜色的列表。结帐此代码：

$border-colors: black #333333, red #ff0000, white #ffffff; 
$background-colors: black #333333, red #ff0000, white #ffffff; 

@mixin list-parser($var){ 
    @each $item in $var { 
    .theme-#{nth($item, 1)} & { 
     border-color: nth($item, 2); 
    } 
    } 
} 

.theme-border-colors { 
    @include list-parser($border-colors); 
} 

.theme-background-colors { 
    @include list-parser($background-colors); 
}

来源

2014-01-21 16:18:43

为主题颜色创建混合

回答

相关问题