SCSS使用方法详解

SCSS (Sassy CSS)，它是一款css预处理语言，是 Sass 3 引入新的语法，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能

并且Sass可以帮助我们减少css重复的代码，减少开发时间。那么Sass有什么强大并且高级的功能呢？例如：变量、嵌套、导入import、混合mixin、继承extend

那就从简单一点的开始入手啦！举个🌰

下面这个小🌰是 ’&‘关键字，意义是引用父级选择器，在这里’&‘代指.container

.container{
  &:hover{
    background: #b084eb;
  }
}

转化为css为

.container:hover{
   background: #b084eb;
}

嵌套多个会怎样呢？此时’&‘代指.container .a 

.container{
  a{
    &:hover{
      background: #b084eb;
    }
  }
}

接下来我们谈一下变量！

变量是使用’$‘符号开头的，用来存储想要复用的信息，例如颜色、字符串、数值等等

$ 变量名: 变量值

$btn-1: #A4C