1.安装sass
npm install -g sass
2.提取公共部分common.scss
@charset "UTF-8";
//假设有白、黑、红三种皮肤(顺序要一一对应)
//white, black, red
$foncColor:#333 #ddd #333;//字体颜色
$foncColor2:#6b6b6b #999 #6b6b6b;//字体2颜色
3.在页面中使用字体颜色
(1)先引入common.scss
@import "common";
(2)样式中写入
@import "common";
@each $globalClass,$ix in (white, 1),(black, 2),(red, 3) {
.#{$globalClass} {
//写基本样式
}
}
这个是判断三种颜色
(3)将这个div元素的字体样式改变:
<div class='demo'>使用三种颜色下不同的字体颜色</div>
@import "common";
@each $globalClass,$ix in (white, 1),(black, 2),(red, 3) {
.#{$globalClass} {
.demo{
color: nth($foncColor2, $ix); //就使用了不同颜色下字体样式不同
font-size:14px;
}
}
}
(4)将div元素的背景改变:
<div class='demo'>使用三种颜色下不同的背景颜色</div>
方法一(直接判断):
@import "common";
@each $globalClass,$ix in (white, 1),(black, 2),(red, 3) {
.#{$globalClass} {
.demo{
@if($globalClass==black) {
background: #fff
}
@else {
background: pink
}
}
}
}
方法二(在公共样式common中定义,跟字体颜色一样)
在common.scss中定义:
@charset "UTF-8";
//假设有白、黑、红三种皮肤(顺序要一一对应)
//white, black, red
$backColor:#333 #ddd #333;//背景颜色
$backColor2:#6b6b6b #999 #6b6b6b;//背景2颜色
在样式中引用:
@import "common";
@each $globalClass,$ix in (white, 1),(black, 2),(red, 3) {
.#{$globalClass} {
.demo{
background:nth($backColor,$ix)
}
}
}