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: #A4C82B;
$btn-2: #499DC8;
$imgPath: '../assets';

来康康怎么使用

.btn{
    background:$btn-1
}

嵌入字符串时需要使用#{ imgPath } 

.con{
    background: url('#{$imgPath}/logo.png'); 
}

嵌套

选择器使用的嵌套规则，要注意的是最好不要过度的嵌套 这样会比较难维护

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li {
    display: inline-block;
  }
  
}

 很多 CSS 属性都有同样的前缀，例如：font-family, font-size 和 font-weight，这样我们就可以使用嵌套属性来写！

.btn{
    font: {
        size: 16px;
        weight: normal;
        family: Hei;
    };
}

下面说一下混合

通过@mixin 指令来定义，下面创建一个名为flex-con和div-size的混入

// 无参数型
@mixin flex-con{
  display: flex;
  flex-direction: column;
  align-items: center;
}

// 有参数型
@mixin div-size($width,$height){
  width: $width;
  height: $height;
}

直接看如何用吧！

.container{
  @include flex-con;
  @include div-size(200px,200px);
}

接下来就是引入啦

通过@import引入文件，可以根据颜色相关文件、字体相关文件进行拆分，这样会更结构化哦！

另外，CSS @import 指令在每次调用时，都会创建一个额外的 HTTP 请求。但是Sass @import 指令将文件包含在 CSS 中，不需要额外的 HTTP 请求。

// common.scss文件
$btn-1: #A4C82B;
$btn-2: #499DC8;
$btn-3: #933CC8;

@import 'common' // 根据自己的文件路径进行引入

// 引入后使用
.btn{
    background:$btn-1
}

继承

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。如果一个样式与另外一个样式几乎相同，只有少量的区别,则使用 @extend 就比较有用

.btn-1{
  display: inline-block;
  padding: 3px;
}
.btn-2{
  background: #b084eb;
  color: #ffffff;
}
.btn-3{
  @extend .btn-1,.btn-2
}

转化为css

.btn-1,.btn-3{
  display: inline-block;
  padding: 3px;
}
.btn-2,.btn-3{
  background: #b084eb;
  color: #ffffff;
}

最后来说一下scss中的循环以及条件语句

下面代码中包含了循环和条件的使用

@each遍历数据，下面是对$btn-types进行遍历

@if @else条件语句，与js中的类似，是不是一下就能看懂！

$btn-1: #A4C82B;
$btn-2: #499DC8;
$btn-3: #933CC8;
$btn-4: #2DC1C8;
$name: 'normal';
$btn-types: (
  "one": $btn-1,
  "two": $btn-2,
  "three": $btn-3,
  "four": $btn-4
);
@each $bu,$color in $btn-types{
  .btn-#{$bu}{
    @if($bu == one){
      color: #fff;
    } @else {
      color: #000000;
    }
    background: $color;
    border: 1px solid $color;
    &:hover {
      background: #00BAF1;
    }
  }
}

那就先到这里啦！