缩减 SCSS 50%样式代码(上)

1.变量 $ 使用

我们可以通过变量来复用属性值，比如颜色、边框大小、图片路径等，这样可以做到更改一处，从而进行全局更改，从而实现“换肤”的功能。

实例1：我们的组件库，利用变量配置，进行统一更改组件的颜色、字体大小等（换肤）

$color-primary: #3ecacb;
$color-success: #4fc48d;
$color-warning: #f3d93f;
$color-danger: #f6588e;
$color-info: #27c6fa;

实例2：图片的配置及全局引入

$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的嵌套功能和父选择器标识符

实例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) -80px 0 no-repeat;  
}  
&:visited {  
  background: url($btn-search) -160px 0 no-repeat; 
 }
}

5、@mixin 混合器和 @extend 指令的使用

实例1：@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);
}

实例2：@extend继承的使用

.common-mod {  
  height: 250px;  
  width: 50%;  
  background-color: #fff;  
  text-align: center;
}
&-mod { 
  @extend .common-mod;  
  float: right;
}
&-mod2 { 
  @extend .common-mod;
}

6、@mixin 混合器默认参数值的使用

实例1：@mixin混合器默认参数值的使用

@mixin pane($dir: left) {  
  width: 35px; 
  display: block;  
  float: $dir;  
  background-color: #f1f1f1;
}
&__paneleft { 
  @include pane;
}
&__paneright {
  @include pane(right);
}

7、#{} 插值的使用

通过 #{} 插值语句可以在选择器或属性名中使用变量。当有两个页面的样式类似时，我们会将类似的样式抽取成页面混合器，但两个不同的页面样式的命名名称根据BEM命名规范不能一样，这时我们可使用插值进行动态命名。

实例1：页面级混合器中的类名利用#{}插值进行动态设置

@mixin home-content($class) { 
 .#{$class} {   
   position: relative;    
   background-color: #fff;    
   overflow-x: hidden;    
   overflow-y: hidden;    
 &--left {     
    margin-left: 160px;  
 }    
 &--noleft {  
    margin-left: 0;  
 } 
 }
}