一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

前言

工具：vscode
插件：easy Sass
- 这是vscode的插件，保存scss文件自动生成.css文件
- marketplace.visualstudio.com/items?itemN…

sass是什么

sass是css的辅助工具，在css的语法基础上增加了变量、嵌套、混合以及导入等高级的功能，有助于更好的组织管理文件

完全兼容css
能够使用控制指令等高级功能
自定义的输出格式

语法格式

sass 是早期的语法格式，支持缩进代替花括号，换行代替分号，易于阅读等但比较严格
scss 是最贴近css3的写法，同时也加入了sass的特色功能

使用变量

声明变量

sass使用$符号作为标识变量符开头,{}里面定义的变量无法在花括号外面使用，类似存在作用域的效果，便于理解。

用$符号开头定义一个变量
存在作用域类似于js

$theme-color:#ff0; //定义变量

$theme-font:"Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"; //逗号分割多个属性

.container{
  $inner-color:#f00; //只能在.container css块里面使用变量
  background:$theme-color;
  font-family: $theme-font;
}

.mian{
  // color: $inner-color;  不能在这里使用
  background-color: $theme-color;
}


//转成css的样子

@charset "UTF-8";
.container {
  background: #ff0;
  font-family: "Myriad Pro" 、Myriad、 "Helvetica Neue" 、Helvetica、 "Liberation Sans";
}

.mian {
  background-color: #ff0;
}

变量引用

变量的引用就比较灵活，基本上css的属性的值都可以用变量去代替，这样我们的可操作性空间就更大了

可以作为css 的属性 color:$theme-color;
可作为变量的属性 $div-border:1px solid$ theme-color;

$theme-color:#ff0; //定义变量

$div-border:1px solid $theme-color; //变量嵌套


div{
  border: $div-border;
}

//编译后

div {
  border: 1px solid #ff0;
}

嵌套

对于嵌套选择器，真的是节省时间的利器，不用重复写相同的选择器，权重的层次分明，而且还便于阅读，但是我们一般不要嵌套超过三层，浏览器引擎解析css的时候是从右往左读取，嵌套的越深性能会受到影响

如何嵌套

主要为了解决css重复写选择器的问题

$div-color:#ff0;

.container{
  border: 1px solid $div-color; 
  div{ //嵌套进来就可以少写一个.container
     color: $div-color;
  }
  p{
    font-size: 18px;
  }
}


//编译后

.container {
  border: 1px solid #ff0;
}

.container div {
  color: #ff0;
}

.container p {
  font-size: 18px;
}

当前的选择器和父级选择器一致时，会默认用父级的

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  #content aside { background-color: #EEE } //重复了~
}

#content article h1 {
  color: #333;
}

#content article p {
  margin-bottom: 1.4em;
}

#content #content aside {
  background-color: #EEE;
}

父选择器的标识符&

我们需要父元素添加伪类的时候，需要使用&符号来操作

article a {
  color: blue;
  &:hover { color: red } //&符号代表就是父元素的意思
}

//编译后

article a {
  color: blue;
}

article a:hover {
  color: red;
}

也可以给标签配合选择器名字 li.item 这样方便

.body{
  ul{
    li.item{
      background-color: #ff0;
      & a.nav {
        color: #f00;
        
      }
    }
  }
}

.body ul li.item {
  background-color: #ff0;
}

.body ul li.item a.nav {
  color: #f00;
}

群组选择器的嵌套

对于这种长串的选择器，通过嵌套可以实现简短的写法

.container {
  h1, h2, h3 {margin-bottom: .8em}
}

nav, aside {
  a {color: blue}
}

//编译后
.container h1, .container h2, .container h3 {
  margin-bottom: .8em;
}

nav a, aside a {
  color: blue;
}

子元素的> + ~ 的使用

对于css的一些选择器，都可以在scss上使用，基本上用得非常丝滑，就比以下几个 > + ~

~ ：兄弟选择器
- ：相邻的兄弟选择器
>：子选择器

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

//编译后

article ~ article {
  border-top: 1px dashed #ccc;
}

article > section {
  background: #eee;
}

article dl > dt {
  color: #333;
}

article dl > dd {
  color: #555;
}

nav + article {
  margin-top: 0;
}

嵌套属性的写法

对于css的属性，我们可以写成如下的方式，类似对象的键值对，只不过用分号

nav {
  margin: { //需要空格
    left:10px
  }

  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}


//编译后

nav {
  margin-left: 10px;
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

还有比较好玩的写法，对于要设置上下左右的border 我们可以用如下写法。

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}


//编译后

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

导入sass

使用SASS部分文件

约定按照_xxx.scss 作为局部文件
导入方式 @import 'xxx'

默认变量值

!default：表示如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值。

//_common.scss

$s1:#ff0;

//index.scss
@import 'common';

$s1:#99f !default;
nav {
  border: 1px solid $s1;
}

//编译后

nav {
  border: 1px solid #ff0;
}

局部嵌套导入

只能用于局部的变量了，有作用域的限制

//_common.scss

$s1:#ff0;

.base{
  color: #99f;
}

//index.scss

$s1:#99f !default;
nav {
  border: 1px solid $s1;
  @import 'common';
}

//编译后


nav {
  border: 1px solid #99f;
}

nav .base {
  color: #99f;
}

原生的CSS导入

一般来讲,scss导入的都是.scss结尾的文件，但是也不要排除特殊的情况，它有三种情况会触发原生的到导入

被导入文件的名字以.css结尾；
被导入文件的名字是一个URL地址（比如www.sass.hk/css/css.css…
被导入文件的名字是CSS的url()值

默认这个css这个import关键词不再是scss专有的而是css2的属性

nav {
  border: 1px solid $s1;
  @import 'normal';
}

//编译后

@import url(/Users/xx/xxx/xxx/xxx/scss/normal.css);
nav {
  border: 1px solid #99f;
}

混合器

对于一些可以重复使用的样式可以用混合器来实现，@mixin @include

@mixin  border-radius-5px {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

div{
  @include border-radius-5px;
}

//编译后

div {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

混合器中的CSS规则

混合css规则，可以被放在父级里面进行混合，它会和其他的同名元素区分开来

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

ul.plain {
  color: #444;
  @include no-bullets;
  li{
    color: #f00;
  }
}

编译后

ul.plain {
  color: #444;
  list-style: none;
}

ul.plain li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0px;
}

ul.plain li {
  color: #f00;
}

给混合器传参

默认可以跟函数一样传参

@mixin isBorderColor($color:#ff0,$width:1px,$style:solid) {
  border: $color $width $style;
}

div{
  @include isBorderColor(#ff9)
}

.div2{
  @include isBorderColor()
}


.div2{ //可以通过写变量名改变位置
  @include isBorderColor($width:2px)
}

//编译后

div {
  border: #ff9 1px solid;
}

.div2 {
  border: #ff0 1px solid;
}

.div2 {
  border: #ff0 2px solid;
}

使用选择器继承来精简CSS

定义一些基础的属性，然后通过选择器继去实现继承

.base{
  color: #f00;
}

.error{
  @extend .base;
  background-color: #fff;
}

.warn{
  @extend .base;
  background-color: #f99;
}

//编译后

.base, .error, .warn {
  color: #f00;
}

.error {
  background-color: #fff;
}

.warn {
  background-color: #f99;
}

总结

scss和less已经成为了前端css必不可少的辅助工具，它的出现给css提供了更多的可能，还有更丰富的写法，以及更快捷方式，现在流行的框架，基本上都有它两的身影，这种类似编程的方式，我们在处理css上会更加舒服，毕竟前端一生敌，宁愿多写几行js，愿不愿意写css，但是这种枯燥无味的工作本身也是前端的一部分，我们能做得就是将它更加简便，更加具有可复用性，现在各式各样的组件库，很大程度的解放了前端的切图仔的工作，我们更加专注业务本身，而非组件的样式。

scss的基本用法

前言