SASS入门之基本语法

接上篇笔记，安装好依赖，配好开发环境之后， 我们便可以在项目中编写sass样式了。

---

1、变量

在sass中，允许我们使用变量，所有变量用$开头，使用非常方便，直接看例子：

$color: #1875e7；
div{
  color: $color;
}

当然变量也可以做插值使用,需要用#{}包裹变量：

$side: left;
.border{
  border-#{$side}-radius: 5px;
}

那有同学问了：为什么要用变量呢？我直接写进去不是一样嘛？
为什么用sass写样式块呢？不光是开发，在修改的时候同样便捷，比如一套系统，有一套颜色风格，在很多地方都会用到同种颜色，那么把这个颜色定义为变量，在调试的时候只要修改这个变量的值，所有引用变量的地方都会自动变化，是不是很便捷~

2、计算功能

$ten: 10px
body{
  margin: (18px / 2);
  top: 150px + 100px;
  left: $ten * 10%
}

3、嵌套

这是我认为比较舒服的地方，大大简化了我的css代码量

// 普通css中：
div{
  background: #fff
}
div p {
  background: #000;
  //balabala···
}
a{
  color: #fff;
}
a:hover {
  color: red
}
// sass中
div{
 background: #fff;
  p{
    background: #000;
    //balabala
  } 
}
a{
  color: #fff;
// 在嵌套中，可以用&来引用父元素
  &:hover{
    color: red
  }
}

---

基本用法会了，我们再看些高大上的

1、继承

sass允许我们某个选择器的样式继承另一个选择器的样式：

.aclass{
  background: red
}
//假设我们有个bclass类，要继承aclass的样式，那我们就用@entend
.bclass{
  @extend .aclass;
  color: #fff
}

2、mixin

可以把它理解为宏，可以复用的代码块，我们先用@mixin指令，定义一个代码块：

@mixin left {
  float: left;
  margin-left: 10px;
}

接着，我们用@include指令调用这个mixin:

div{
  @include left;
}

既然能够成为宏，那必须得能传参：

@mixin left($value: 10px){
  float: left;
  margin-left: $value;
}

这个10px呢就是默认缺省值，根据我们的需要，使用时可加入参数：

div{
  @include left(20px);
}

3、插入文件

Sass的@import和CSS的不一样。CSS的@import，只有在执行到的时候才去下载其他CSS文件，这就影响了页面加载；而Sass的@import在生成CSS文件的时候就把相关文件导入进来了。
我们用@import命令来插入外部文件：

@import 'path/abc.scss'

4、占位符

（以%开头）:

%left{
  float: left;
  margin-left: 10px
}
div{
  @extend %left
}

那这个占位符和直接继承有啥区别呢？主要区别在于编译后的css上面，占位继承使css更简洁，我这里不做过多解释。

---

还不够给力吗？我们在来看看sass的高级用法

1、条件语句

我们用@if指令

p{
  @if 1+1 == 2 {border: 1px solid;}
  @if 5<3 {border: 2px dotted;}
}
//当然有配套的`@else`指令
@if lightness($color) > 30% {
  background: #000;
} @else {
  background: #fff
}

2、循环语句

for循环必须支持滴：

@for $i from 1 to 10 {
  .border- #{$i} {
    border: #{$i}px solid blue;
  }
}

也支持while循环：

$i: 6;
$while $i >0 {
  .item-#{i} {
    width: 2em * $i;
    $i: $i - 2;
  }
}

自定义函数

@function double($n){
  @return $n * 2
}

#slidebar{
  width: double(10px);
}

看完这篇文章，那么恭喜你你已经入门sass了，其实还有很多更好玩的，可以去看官方文档，现在我把天空还给你，你自己去点缀你的蓝天吧～