切图利器！scss用法推荐

经历了一个博达站群前端页面改造的项目，用了scss，我才真正的意识到预编译的css用起来有多爽

变量

$imgBaseUrl: '../';
$theme-color: #5576BD; // 主题颜色
$font-color: #272727; // 主要字体颜色
$font-sub-color: #c1c1c1; // 次要字体颜色
$full-width: 750px;
....
// 诸如此类，多处使用的样式，直接写成变量。使用时

.box{
    width: $full-width;
    font-size: 24px;
    color: $font-color;
    border: 1px solid $theme-color;
}

scss中注释就像写js一样的写法，编译完成之后，注释就不存在了。灰常的方便

嵌套css

简单点说，scss中同一层级的css选择器，只写一遍即可：

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

基础的不说太多了，接下来重点来了

敲一敲

mixin

mixin（混合器），可以将一段css打包成一个代码块，进行调用。比如：

// 清浮动
@mixin clearFloat{zoom:1; &:after{display:block; clear:both; content: ''; visibility:hidden; height:0}}
// 单行文本溢出
@mixin overEllipsis{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

mixin传参数

// 多行文本溢出, 传参可控制 n行超出隐藏
@mixin multiOverEllipsis ($column) {overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: $column; -webkit-box-orient: vertical;}

/*参数带有默认值的用法*/
// 图片居中满铺
@mixin imgCoverParm($top: 50%, $ty: -50%){object-fit: cover; position: relative; top: $top; left: 50%; transform: translate(-50%,$ty);}

mixin在调用的时候，只需要用到@include指令

p.plain {
  color: #444;
  @include multiOverEllipsis(2); // 超过2行省略
}

/*编译后*/
p.plain {
  color: #444;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

例如，我在设计移动端页面布局时，一般使用的都是flex布局，常用的flex布局都写成了mixin

如需自取

@mixin text-elli {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
@mixin text-elli-two{overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}

@mixin flex-lc {display: flex; justify-content: flex-start; align-items: center;}
@mixin flex-cc {display: flex; justify-content: center; align-items: center;}
@mixin flex-rc {display: flex; justify-content: flex-end; align-items: center;}
@mixin flex-bc {display: flex; justify-content: space-between; align-items: center;}
@mixin flex-ac {display: flex; justify-content: space-around; align-items: center;}
@mixin flex-lc-column {display: flex; flex-direction: column; justify-content: flex-start; align-items: center;}
@mixin flex-cc-column {display: flex; flex-direction: column; justify-content: center; align-items: center;}
@mixin flex-cl-column {display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
@mixin flex-lc-wrap {display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
@mixin flex-cc-wrap {display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}

函数指令@function

// 转百分比
@function transPer ($num) { @return ($num / 750) * 100 * 1% }
// fontSize 12px转em
@function transEm ($num) { @return ceil(($num / 12) * 100) / 100 * 1em }

这种一般使用场景就是编写，随后可能修改的单个css属性，比如

我在博达网站群原有的项目上，设计布局，为了适配更多分辨率的屏幕，我将有些样式采用了百分比布局，但在真实的环境当中，存在媒体查询，可能会有冲突，所以在编写代码的时候，我就使用

#sidebar { width: transPer(24); } // 24代表效果图设计尺寸24px
/*编译后*/
#sidebar { width: 3.2%; }

总结

scss真的超级灵活，仅仅是这几指令，帮了我好大的忙，少些了n多行样式。建议都试试，还有其他@extend（继承指令），#{}插值语法，等很强大的功能，我还没用的，慢慢用起来。