scss

一、scss 是什么

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

二、scss 版本问题

# npm版本 6.14.10
npm i [email protected] -g

# sass-loader版本 8.0.2
npm i [email protected] -D
# 或
npm i sass-loader@7 -D

# node-sass 4.14.1
npm i [email protected] -D

# 删除命令
npm uninstall +名称

三、scss 和 sass 有什么区别？

sass是最早的名字，而且省略了大括号，导致可读性非常差

scss回归样式的规范，添加大括号

四、变量

<style lang="scss">
$color:blue;
.a{
  width: 200px;
  height: 200px;
  background: $color;
}
.b{
  width: 100px;
  height: 100px;
  background: $color;
}
</style>

//拼接字符
<style lang="scss">
$color:blue;
$width:200;
.a{
  width: ##{$width}px;
  height: 200px;
  background: $color;
}
</style>

五、嵌套

<style lang="scss">
.a {
  width: 100px;
  height: 100px;
  background: blue;

 //&是父选择器标识符
  &:hover {
    background: red;
  }

 //属性嵌套
  border: 1px solid ##000{
    left: 5px solid ##000;
    right: 10px solid ##000;
  }
}
</style>

六、导入 scss 文件

//引入其他的scss文件
@import "@/css/index.scss";

//使用他人提供的css文件的时候，可以把该文件改成scss文件，然后再引入
@import "@/css/test.scss";

//默认变量，使用!default做标识。
@import "@/css/index.scss";
$color:blue !default;
.a{
  width: 100px;
  height: 100px;
  background: $color;
}

七、控制语句

//@if
<style lang="scss">
$num:3;
.a{
  @if $num == 1 {
    color: red;
  }@else if $num == 2{
    color: blue;
  }@else{
    color: green;
  }
}
</style>

//@for 循环数字（必须是正整数）
<style lang="scss">
@for $num from 1 through 5 {//1-5
    .item##{$num}{
      width: ##{$num*10}px;
      height: 20px;
      border: 1px solid;
    }
}

@for $num from 1 to 5 {//1-4
    .item##{$num}{
      width: ##{$num*10}px;
      height: 20px;
      border: 1px solid;
    }
}
</style>

//@each 循环数组
<style lang="scss">
@each $color in blue,red,yellow {
  .item-##{$color}{
    color:$color
  }
}
</style>

//@mixin和@include
@mixin font-size($num:10) {
  font-size: ##{$num}px;
}
p{
  color: red;
  @include font-size();
}
a{
  color: blue;
  @include font-size();
}
span{
  color: yellow;
  @include font-size(30);
}
</style>

//@extend
<style lang="scss">
.a{
  color: blue;
  font-size: 20px;
  font-weight: bold;
}
.b{
  color: red;
  @extend .a;
}
</style>

//@function
<style lang="scss">
@function getWidth($width){
  @return $width + 10
}

.a{
  width: ##{getWidth(10)}px;
  height: 10px;
  background: red;
}
</style>