1、变量 $ 使用
可以通过变量来复用属性值，比如颜色、边框大小、图片路径等。可以利用这个特点实现“换肤”功能。
$color-primary: #3ecacb;
$color-success: #4fc48d;
$color-warning: #f3d93f;
$color-danger: #f6588e;
$color-info: #27c6fa;图片的使用（该方法只会在使用相应图片时进行加载，不会导致额外性能问题）
$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文件
@import "./base.scss";
@import "./webupload.scss";
@import "./message-hint.scss";3、局部文件命名的使用
scss局部文件的文件名以下划线开头。这样，scss就不会再编译时单独编译这个文件输出css，而只把这个文件用作导入。再使用scss时，混合器mixins是最适合的使用场景，因为混合器不需要单独编译输出css文件
4、scss的嵌套功能和父选择器标识符
嵌套功能和父选择器标识符&解决BEM长的问题：
.tea-assignhw {&__top { margin:0; }&__content {padding-left:45px; }&__gradeselect {width:158px; }}
嵌套中使用子选择器、兄弟选择器和伪类选择器
/*子选择器*/&__hint {margin:20px;font-size:14px;> p:first-child { font-weight: bold; }} /*兄弟选择器*/&__input {width:220px;& + span { margin-left:10px; }} /*伪类选择器*/&__browse {background:url($btn-search) no-repeat;&:hover { background: url($btn-search) -80px 0 no-repeat; }&:visited {background:url($btn-search) -160px 0 no-repeat; }}
5、@mixin混合器和@extend指令的使用
@mixin混合器的使用
@mixin paneactive($image, $level, $vertical) {background:url($image) no-repeat $level $vertical;height:100px;width:30px;position:relative;top:50%; }&--left-active {@include paneactive($btn-flip, 0, 0); }&--right-active {@include paneactive($btn-flip, 0, -105px); }
@extend继承的使用
.common-mod {height:250px;width:50%;background-color:#fff;text-align:center; }&-mod {@extend .common-mod; float:right; }&-mod2 {@extend .common-mod; }
@mixin混合器默认参数值的使用
@mixin pane($dir: left) {width:35px;display:block;float:$dir;background-color:#f1f1f1; }&__paneleft {@include pane; }&__paneright {@include pane(right); }
6、#{}插值的使用
通过#{}插值语句可以在选择器或属性名中使用变量。
页面级混合器中的类名利用#{}插值进行动态设置
@mixin home-content($class) {.#{$class} {position:relative;background-color:#fff;overflow-x:hidden;overflow-y:hidden;&--left { margin-left:160px; }&--noleft {margin-left:0; }} }
7、运算的使用
SassScript支持数字的加减乘除、取整等运算 (+, -, *, /, %)
input组件根据输入框的高度设置左右内边距
.ps-input {display:block;&__inner { -webkit-appearance:none;padding-left:#{$--input-height + 10 }; padding-right: #{$--input-height + 10 }; } }
8、相关scss自带函数的应用
scss自带一些函数，例如hsl、mix函数等
button组件的点击后颜色是将几种颜色根据一定的比例混合在一起，生成另一种颜色
&: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; }
@for指令可以在限制得范围内重复输出样式，每次按变量的值对输出结果进行变动
设置hwicon类底下第2到8个div子节点需设置样式
@for $i from 2 through 8 {.com-hwicon { > div:nth-child(#{$i}) {position:relative;float:right; }} }
9、each遍历、map数据类型、@mixin/@include混合器、#{}插值结合使用
生成不同的选择器类，并且每个选择器类中的背景图片不同
$img-list: ( (accessimg, $papers-access), (folderimg, $papers-folder), (bmpimg, $papers-bmp), (xlsimg, $papers-excel), (xlsximg, $papers-excel), (gifimg, $papers-gif), (jpgimg, $papers-jpg), (unknownimg, $papers-unknown) ); @each $label, $value in $img-list {.com-hwicon__#{$label} {@include commonImg($value); }}
10、样式代码检查校验--stylelint插件
（1）需要安装gulp、stylelint、gulp-postscss 、 postcss-reporter、stylelint-config-standard，安装命令为：
npm install gulp stylelint gulp-postscss postcss-reporter
stylelint-config-standard--save-dev（2）安装完成后会在项目根目录下创建gulpfile.js文件，文件gulpfile.js配置为：
var reporter = require('postcss-reporter'); var stylelint = require('stylelint'); var stylelintConfig ={ 'extends': 'stylelint-config-standard', 'rules': { 'at-rule-no-unknown': [ true, { 'ignoreAtRules': [ 'extend', 'include', 'mixin', 'for'] } ] } }; gulp.task('scss-lint', function() { var processors =[ 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 检验规则
11、样式自动修复插件--stylefmt插件
stylefmt 是一个基于 stylelint 的代码修正工具，它可以基于stylelint的代码规范约定配置，对可修正的地方作格式化输出。
（1）gulp.js配置文件如下：
var stylefmt = 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('fix', ['stylefmt']);
（2）运行命令进行样式修复，如下图：
12、将scss语法编译成css语法--koala工具