1.scss 封装 color 、background 样式表 目前就写这个一部分，后期会陆续加入其他 封装写法；
/* 背景 渐变 */
$bglist: (
(title: 'ee-cc', deg:180, one: #eeeeee, two:#cccccc),
(title: 'ffda75-ffb534', deg:90, one: #ffda75, two:#ffb534),
(title: 'ffd46b-ffb400', deg:180, one: #ffd46b, two:#ffb400),
(title: 'ffb400-ffd46b', deg:0, one: #ffb400, two:#ffd46b),
(title: 'fdeb70-fcb62e', deg:180, one: #fdeb70, two:#fcb62e),
(title: 'ffcf4d-ffa70f', deg:180, one: #ffcf4d, two:#ffa70f),
(title: 'c7dcf5-94b7e6', deg:180, one: #c7dcf5, two:#94b7e6),
(title: 'ffc791-e59e59', deg:180, one: #ffc791, two:#e59e59),
(title: 'ff8282-ff3e3e', deg:180, one: #ff8282, two:#ff3e3e),
(title: 'ff88a1-ff4f74', deg:180, one: #ff88a1, two:#ff4f74),
(title: 'f06363-d9474d', deg:180, one: #f06363, two:#d9474d),
(title: 'ff6a90-ff2f70', deg:180, one: #ff6a90, two:#ff2f70),
(title: 'ff6687-ff4646', deg:266, one: #ff6687, two:#ff4646),
(title: 'ff7895-ff4a71', deg:180, one: #ff7895, two:#ff4a71),
);
@for $i from 1 through length($bglist) {
$item: nth($bglist, $i);
$title : map-get($map: $item, $key: title );
$deg :map-get($map: $item, $key: deg );
$one: map-get($map: $item, $key: one );
$two: map-get($map: $item, $key: two );
$istext: map-get($map: $item, $key: istext );
.bg-#{$title}{
background: linear-gradient($deg + deg , $one, $two);
}
}
/* 边框 */
$borderlist: (
(title: 'bf', color: #bfbfbf),
(title: 'f0', color: #f0f0f0),
(title: 'f5', color: #f5f5f5),
(title: 'ff', color: #ffffff),
(title: 'ee', color: #eeeeee),
(title: 'e5', color: #e5e5e5),
(title: 'e9', color: #e9e9e9),
(title: 'dd', color: #dddddd),
(title: '33', color: #333333),
(title: '99', color: #999999),
(title: 'ff6678', color: #ff6678),
(title: 'ff6687', color: #ff6687),
);
/* 边框 各边框颜色 */
@for $i from 1 through length($borderlist) {
$item: nth($borderlist, $i);
$title : map-get($map: $item, $key: title );
$color: map-get($map: $item, $key: color );
@for $a from 1 through 10 {
@if $a % 2 == 0 {
.border-#{$a}-#{$title}{
border: $a + rpx solid $color;
}
.border-t#{$a}-#{$title}{
border-top: $a + rpx solid $color;
}
.border-l#{$a}-#{$title}{
border-left: $a + rpx solid $color;
}
.border-r#{$a}-#{$title}{
border-right: $a + rpx solid $color;
}
.border-b#{$a}-#{$title}{
border-bottom: $a + rpx solid $color;
}
}
}
}
$colorlist: (
(title: '00', color: #000000),
(title: '33', color: #333333),
(title: '66', color: #666666),
(title: '99', color: #999999),
(title: '9b', color: #9b9b9b),
(title: 'aa', color: #aaaaaa),
(title: 'a1', color: #a1a1a1),
(title: 'a2', color: #a2a2a2),
(title: 'a3', color: #a3a3a3),
(title: 'a4', color: #a4a4a4),
(title: 'a5', color: #a5a5a5),
(title: 'a6', color: #a6a6a6),
(title: 'a7', color: #a7a7a7),
(title: 'a8', color: #a8a8a8),
(title: 'a9', color: #a9a9a9),
(title: 'b9', color: #b9b9b9),
(title: 'cc', color: #cccccc),
(title: 'ca', color: #cacaca),
(title: 'dd', color: #dddddd),
(title: 'd0', color: #d0d0d0),
(title: 'd7', color: #d7d7d7),
(title: 'e9', color: #e9e9e9),
(title: 'ff', color: #ffffff),
(title: 'f0', color: #f0f0f0),
(title: 'f1', color: #f1f1f1),
(title: 'f2', color: #f2f2f2),
(title: 'f3', color: #f3f3f3),
(title: 'f4', color: #f4f4f4),
(title: 'f5', color: #f5f5f5),
(title: 'f6', color: #f6f6f6),
(title: 'f7', color: #f7f7f7),
(title: 'f8', color: #f8f8f8),
(title: 'f9', color: #f9f9f9),
(title: '15ca2b', color: #15ca2b),
(title: '2d3748', color: #2d3748),
(title: '411411', color: #411411),
(title: '969799', color: #969799),
(title: '9c112f', color: #9c112f),
(title: 'b5afaf', color: #b5afaf),
(title: 'c44320', color: #c44320),
(title: 'c8c9cc', color: #c8c9cc),
(title: 'ccd6e0', color: #ccd6e0),
(title: 'd29d36', color: #d29d36),
(title: 'db1019', color: #db1019),
(title: 'ef3b62', color: #ef3b62),
(title: 'ef807c', color: #ef807c),
(title: 'efbd5c', color: #efbd5c),
(title: 'ffb400', color: #ffb400),
(title: 'ffb80c', color: #ffb80c),
(title: 'ffc527', color: #ffc527),
(title: 'ffd5de', color: #ffd5de),
(title: 'ffd74c', color: #ffd74c),
(title: 'ffeab2', color: #ffeab2),
(title: 'ffefca', color: #ffefca),
(title: 'ffe5eb', color: #ffe5eb),
(title: 'ffeff3', color: #ffeff3),
(title: 'ffe9ee', color: #ffe9ee),
(title: 'fff2f4', color: #fff2f4),
(title: 'fff3c8', color: #fff3c8),
(title: 'fff9db', color: #fff9db),
(title: 'ff6678', color: #ff6678),
(title: 'ff6687', color: #ff6687),
(title: 'ff7190', color: #ff7190),
(title: 'f23c63', color: #f23c63),
);
/* 字体 颜色 */
@for $i from 1 through length($colorlist) {
$item: nth($colorlist, $i);
$title : map-get($map: $item, $key: title );
$color: map-get($map: $item, $key: color );
.cor-#{$title}{
color: $color;
}
}
/* 字体 透明度 颜色 */
@for $i from 1 through length($colorlist) {
$item: nth($colorlist, $i);
$title : map-get($map: $item, $key: title );
$color: map-get($map: $item, $key: color );
@for $a from 1 through 9 {
.cor-alp-#{$title}-#{$a}{
color: rgba($color, $a/10);
}
}
}
/* 背景 单色 颜色 */
@for $i from 1 through length($colorlist) {
$item: nth($colorlist, $i);
$title : map-get($map: $item, $key: title );
$color: map-get($map: $item, $key: color );
.bg-#{$title}{
background: $color;
}
}
/* 背景 透明度 颜色 */
@for $i from 1 through length($colorlist) {
$item: nth($colorlist, $i);
$title : map-get($map: $item, $key: title );
$color: map-get($map: $item, $key: color );
@for $a from 1 through 9 {
.bg-alp-#{$title}-#{$a}{
background: rgba($color, $a/10);
}
}
}
