使用sass处理多皮肤页面样式编写

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)
        }

    }
}