前言

之前一直用Less，因为觉得这个简单又好用，随着技术的提升和效率的提高，就开始不满足less的规则，想起css还有其他的预编译语言，Sass和Stylus，就网上查找相关资料的，发现Sass和Stylus有一个优点，就是编程功能强大的，Styles好像更厉害的，这点Less比不上，便蠢蠢欲动，然后我决定选择Sass来学习，因为Sass很成熟的，有全面的中文文档，学习起来应该不会那么难受的。然后我就笔记下，做个迷你版的Sass用法，以后能便于查询。

CSS功能拓展

1、嵌套规则

• 是把一个样式嵌入另一个样式，好处是避免重复写父类名

.box{
    width: 100px;
    height: 100px;
    .img{
        width: 100%;
    }
}

编译为

.box{
    width: 100px;
    height: 100px;
}
.box img{
    width: 100%;
}

2、父选择器 &

• 在嵌套规则时，有时需要使用父选择器，可直接用&代替父选择器

a{
    color: #000;
    &:hover{
        color: #fff;
    }
}

编译为

a{
    color:#000;
}
a:hover{
    color: #fff;
}

• 还可以拼接其他的字符串，比如

.main{
    color: black;
    &-box{
        coloe: white;
    }
}

编译为

.main {
  color: black;
}
.main-box {
  coloe: white;
}

3、属性嵌套

这个嘛，比如说border-top，border-bottom，前面都有同样的命名空间:border，看下面的例子:

.box{
    border:{
        top: 1px solid #ccc;
        left: 1px solid #ccc;
    }
}

编译为

.box{
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
}

不需要重复输入命名空间啦，麻麻再也不要担心我下班很晚～这点是less比不上之一。

SassScript

这点很强大的，可像js那样思维的（看后面的Script就知道啦)，官网说法是允许属性使用变量，算数运算等额外功能，（好厉害.jpg）

1、变量 $

• 这相当于js中的const定义变量，在这里用$来定义

$green:green;

然后使用时就调用这个变量

#main{
    color: $green;
}

我们平时做项目，一般都会有主题的颜色，如果按照css的习惯，那就要每次输入颜色值的，等回头要求换颜色的，就要一个一个改，维护成本太高了。所以用这个最好不过了，要改的话，就改变量一个就好了。

• 这还支持块级作用域，方法就在嵌套规则内使用的（这就是局部变量，局部变量的概念和js概念一样），如果想要将局部变量转换为全局变量，后面加!global即可，这个应该不常用的。

.main {
  $width: 5em !global;
  width: $width;
}

.sidebar {
  width: $width;
}

编译为

.main {
  width: 5em;
}

.sidebar {
  width: 5em;
}

更新中 ```