前言Sass是CSS3语言的扩展，它可以帮助你更轻松地编写出更好的样式表，让你免于重复劳动，让你的工作更有创意。因为你可以更快地拥抱变化，你也将敢于在设计上进行创新。您编写的样式表可以自由处理修改颜色或修改HTML标签，并为各种生产环境编写标准的CSS代码。Sass的语法比较简单，但是难点在于如何将Sass应用到实际项目中，解决CSS的痛点，提高我们的效率。在实际项目摸索之后，总结了以下14条实践经验分享，希望能帮助大家开阔思路，更好地将Sass应用到实际项目中。在项目中，我们使用了Scss，它支持传统的类CSS语法，所以下面的项目经验总结分享以Scss为例。1、变量$我们可以通过变量来复用属性值，比如颜色、帧大小、图片路径等，这样一改就可以全局改变，从而实现“换皮”的功能。示例1：我们的组件库使用变量配置统一改变组件的颜色和字体大小（换肤）：$color-primary:#3ecacb;$color-success:#4fc48d;$color-warning:#f3d93f;$color-danger:#f6588e;$color-info:#27c6fa;例2：全局导入scs中图片的配置和图片的使用可能会出现以下两个问题：（1）如果样式文件和样式文件的使用如果vue文件不在同一个目录下，会找不到图片（2）如果图片路径配置变量写成vue文件的风格，但是这种写法会导致图片和style，我们可以把图片路径写成配置文件，然后做一个全局的引入，这样就可以统一改变图片路径了（而且这个方法只会在使用对应图片的时候加载，不会造成额外的性能问题):$common-path:'./primary/assets/img/';$icon-see:$common-path+'icon-see.png';$icon-play:$common-path+'icon-play.png';$icon-comment:$common-path+'icon-comment.png';$icon-checkbox:$common-path+'icon-checkbox.png';2.@import导入Scss文件(1)Css中的@import规则允许在一个css文件中导入其他css文件。但是这样带来的后果是浏览器只有在执行@import的时候才会去下载其他的css文件，导致页面加载非常慢。(2)Scss中的@import规则，区别在于scss的@import规则是在生成css文件时导入相关文件。这意味着所有相关样式都被分组到同一个css文件中，而不需要额外的下载请求。示例1：将组件的样式文件统一导入到组件库中的index.sccs中，然后如果项目中有使用组件库的地方，只需要在入口处导入index.scss文件即可项目的，如下图在index.scss文件中引入各个组件的样式文件：@import"./base.scss";@import"./webupload.scss";@import"./message-hint.scs";3.部分文件命名使用scss部分文件的文件名以下划线开头。这样scss在编译的时候就不会单独编译这个文件来输出css，而只是把这个文件作为一个import。在使用scss的时候，mixinsmixins是最合适的使用场景，因为mixins不需要单独编译输出的css文件。示例1：将mixer的名称写成部分文件命名方式，如下图img4，Scss嵌套函数和父选择器标识符我们可以使用嵌套函数和父选择器标识符&来减少重复代码，特别是如果你CSS类采用BEM命名规范，存在样式类命名冗长的问题。使用该功能可以解决BEM命名冗长的问题，样式可读性更强。示例1：嵌套函数和父选择器标识符&解决BEM冗长问题：.tea-assignhw{&__top{margin:0;}&__content{padding-left:45px;}&__gradeselect{width:158px;}}**示例2:**在嵌套中使用子选择器、兄弟选择器和伪类选择器(1)子选择器&__hint{margin:20px;font-size:14px;>p:first-child{font-weight:bold;}}(2)兄弟选择器&__input{width:220px;&+span{margin-left:10px;}}(3)伪类选择器&__browse{background:url($btn-search)no-repeat;&:hover{background:url($btn-search)-80px0no-repeat;}&:visited{background:url($btn-search)-160px0no-repeat;}}5.使用@mixinmixer和@extenddirective变量允许你重用属性值，但是如果你想重用一大块规则呢？传统上，如果在样式表中发现重复项，则将通用规则提取到新的CSS类中。在Scss中，@mixin和@extend继承指令可以用来解决上述大段规则重用的场景。但是两者的使用场景有什么区别呢？(1)@mixin的主要优点是可以接受参数。如果要传递参数，自然会选择@mixin而不是@extend，因为@extend不能接受参数（2）因为mixer规则混入其他类中，输出样式表中无法完全避免重复。选择器继承是指允许一个选择器重用另一个选择器的所有样式，而不需要重复输出这些样式属性；即使用@extend生成DRYCSS样式代码（不要自己重复）总结上面说了，如果需要传递参数，只能使用@mixin混合器，否则最好使用@extend遗产。示例1：使用@mixinmixer@mixinpaneactive($image,$level,$vertical){background:url($image)no-repeat$level$vertical;height:100px;width:30px;position:relative;top:50%;}&--left-active{@includepaneactive($btn-flip,0,0);}&--right-active{@includepaneactive($btn-flip,0,-105px);}实例2：@extendinheritedusage.common-mod{height:250px;width:50%;background-color:#fff;text-align:center;}&-mod{@extend.common-mod;float:right;}&-mod2{@extend.common-mod;}6.使用@mixinmixer的默认参数值在使用@includemixer时不需要传入所有参数。我们可以为参数指定一个默认值，如果需要，如果参数是默认值，@include时可以省略参数；如果要传递的参数不是默认值，则在@include时传入新的参数。示例1：@mixin混合器默认参数值的使用@mixinpane($dir:left){width:35px;display:block;float:$dir;background-color:#f1f1f1;}&__paneleft{@includepane;}&__paneright{@includepane(right);}7.#{}插值的使用通过#{}插值语句，可以在选择器或属性名中使用变量。当存在两个样式相似的页面时，我们会将相似的样式提取到页面混合器中，但是根据BEM命名规范，两个不同页面样式的命名名称不能相同。这时候我们可以使用插值的方式进行动态命名。示例1：页面级混合器中的类名使用#{}插值动态设置@mixinhome-content($class){.#{$class}{position:relative;background-color:#fff;overflow-x:hidden;overflow-y:hidden;&--left{margin-left:160px;}&--noleft{margin-left:0;}}}8、使用SassScript进行运算支持加减乘除，除法、舍入等操作（+、-、*、/、%）例1：输入组件根据输入框的高度设置左右内边距，如下：.ps-input{display:块;&__inner{-webkit-appearance:none;padding-left:#{$--input-height+10};padding-right:#{$--input-height+10};}}9.scss相关内置函数的应用scss自带一些函数，例如hsl，mix函数等**例1：被点击的按钮组件的颜色就是将几种颜色按照一定的比例混合在一起生成另一种颜色。**像这样：&:focus{color:mix($--color-white,$--color-primary,$--button-hover-tint-percent);border-color:transparent;background-color:transparent;}&:active{color:mix($--color-black,$--color-primary,$--button-active-shade-percent);border-color:transparent;background-color:transparent;}10.@for命令可以为相关scss内置函数的应用在限定范围内重复输出样式，每次根据变量的值改变输出结果。例1：比如项目中，需要设置hwicon类下第2到第8个div子节点的样式，如下：@for$ifrom2through8{.com-hwicon{>div:nth-child(#{$i}){position:relative;float:right;}}}11、每次遍历，map数据类型，@mixin/@includemixer，#{}插值可以结合每次遍历，map数据组合使用type，@mixin/@includeMixer，#{}插值生成不同的选择器类，每个选择器类中的背景图片不同，如下：$img-list:((accessimg,$papers-access),(folderimg,$papers-文件夹),(bmpimg,$papers-bmp),(xlsimg,$papers-excel),(xlsximg,$papers-excel),(gifimg,$papers-gif),(jpgimg,$papers-jpg),(unknownimg,$papers-unknown));@each$label,$valuein$img-list{.com-hwicon__#{$label}{@includecommonImg($value);}}12.样式代码检查验证———stylelintpluginCSS严格意义上不能算作编程语言，但在前端系统中不可小觑嗯。CSS是一种基于描述的样式表。如果描述的乱七八糟，毫无章法，对其他开发者，尤其是有强迫症的开发者来说，一定是一颗定时炸弹。CSS看似简单，但要写出漂亮的CSS却相当困难。因此，验证CSS规则的行动迫在眉睫。stylelint是一个强大的现代CSS检测器，它使开发人员能够遵循一致的约定并避免样式表中的错误。**（1）需要安装gulp、stylelint、gulp-postscss、postcss-reporter、stylelint-config-standard，**安装命令为：npminstallgulpstylenintgulp-postscsspostcss-reporterstylelint-config-standard--save-dev（2)安装完成后，会在项目根目录下创建gulpfile.js文件。gulpfile.js文件配置为：varreporter=require('postcss-reporter');varstylelint=require('stylelint');varstylelintConfig={'extends':'stylelint-config-standard','rules':{'at-rule-no-unknown':[true,{'ignoreAtRules':['extend','include','mixin','for']}]}};gulp.task('scss-lint',function(){varprocessors=[stylelint(stylelintConfig),reporter({clearMessages:true,throwError:true})];returngulp.src(['src/style/*.scss']//需要工具检查的Scss文件).pipe(postcss(processors));});gulp.task('default',['scss-lint']);(3)stylelint-config-standard检查规则stylelint-config-standard是stylelint官方推荐的标准校验规则。具体验证规则请参考官网。（4）运行命令查看样式13.样式自动修复插件——stylefmt插件stylefmt是一款基于stylelint的代码修正工具。(1)gulp.js配置文件如下：varstylefmt=require('gulp-stylefmt');//css格式自动调整工具gulp.task('stylefmt',function(){returngulp.src(['src/style/student/index.scss'//需要工具检查的scss文件]).pipe(stylefmt(stylelintConfig)).pipe(gulp.dest('src/style/dest/student'));});gulp.task('修复',['stylefmt']);(2)运行修复样式的命令，如下图img14，把scss语法编译成css语法——gulp-sass插件刚开始写scss代码的时候，对语法不熟悉等等，写的scss代码得到的页面效果不是我们想要的。这时候我们可以使用gulp-sass插件来监控scss代码，实时生成css代码，这样我们就可以通过查看css代码来判断编写的scss代码是否正确。（1）gulp.js配置文件如下：vargulpsass=require('gulp-sass');gulp.task('gulpsass',function(){returngulp.src('src/style/components/hwIcon.scss').pipe(gulpsass().on('error',gulpsass.logError)).pipe(gulp.dest('src/style/dest'));});gulp.task('watch',function(){gulp.watch('src/style/components/hwIcon.scss',['gulpsass']);});复制代码复制代码（2）运行命令监控scss文件，动态编译scss代码生成css代码文件，如下图img
