SCSS动态生成类

动态生成类"/>

SCSS动态生成类

前言

在项目开发中，为了方便样式的复用和规范化，通常都会统一一些公共的样式类，如果用传统的css来写就会显得很臃肿。
最近看了看接手的项目的公共css文件，发现很多重复的样式声明，还有全局的样式使用不统一问题。
例如下图，就有很多重复的声明，并且代码看起来也不太优雅！下面使用scss来优化一下。

统一定义样式颜色

$primary:#4e9afe;
$success:#07c160;
$danger:#ed151c;
$yellow:orange;
$green:green;
$violet:violet;
$default:#8a8a8a;

利用循环 动态生成样式类

1、生成全局统一按钮样式类、颜色类名

（1）定义好按钮主题色

$colors: (primary: $primary,danger: $danger,success: $success,yellow: $yellow,green: $green,violet: $violet,default:$default,grey:#8a8a8a
);

（2）利用mixin编写公共的样式方法（可根据实际项目设计来编写）

@mixin button {border-radius: 20px;padding: 3px 8px;font-size: 14px;
}
//正常按钮
@mixin btnOrigin($btn_them) {color: #fef4e9;background: #{$btn_them};@include button;
}
//线条按钮
@mixin btnLine($btn_them) {color: $btn_them;border: 1rpx solid $btn_them;@include button;
}

（3）利用@each来遍历生成class

@each $name, $color in $colors {.#{$name} {&-color {//生成颜色类目color: $color;}&-btn {//按钮@include btnOrigin($color);&:active {@include btnOrigin(rgba($color, 0.4));}}&-line-btn {//线条按钮@include btnLine($color);&:active {@include btnLine(rgba($color, 0.4));}}}
}

按照上面的方法，生成的类.primary-btn、.danger-btn，primary-line-btn等样式类,类名可以自定义拼接的。

如primary-line-btn按钮

生成的样式如下

.primary-line-btn {color: #4e9afe;border: 1rpx solid #4e9afe;border-radius: 20px;padding: 3px 8px;font-size: 14px;
}
.primary-line-btn:active{....
}

（4）可以利用if else来自定义个别按钮样式

@each $name, $color in $colors {.#{$name} {&-btn {@include btnOrigin($color);@if #{$name}=='grey' {color: black;&:active {color:rgba(black,0.5)!important;}}&:active {@include btnOrigin(rgba($color, 0.4));}}}
}

2、利用for循环生成字体大小类

生成font-size从12到20的类，类名是fs-12,fs-13…

@for $i from 12 to 20 {.fs-#{$i} {font-size: #{$i}px;}
}

3、生成宽度

生成的类名是w-10,w-25…

$ws:(10,15,20,25,30,35,40,45,50,60,70,80,90,100,98,95,85,
)
@each $i in $ws{.w-#{$i}{width: #{$i}+'%'}
}

总结

以上只是小部分举例应用，都大同小异，实际上还可以灵活使用生成各种各式的样式、提高我们的样式代码灵活度，最后想说：真正使用上scss还是很香的！