持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

概念

scss是一种css样式的预处理语言(补充其中less和sass它们也是css预处理语言)(因浏览器不能直接使用,需要换成css)

scss的很多语法与less类似(如:变量,嵌套,模块化)

使用

在VScord里安装easy sass的插件,可以自动的把.scss变为.css

scss预处理器的基础语法

分为5部分

第一个是嵌套语法

第二个是**&父选择器**

第三个是变量

第四个是mixin

第五个是模块

详细介绍在以下

1.嵌套语法

scss语法跟less类似通俗来说就是一个套一个

@color 这里的color只是个名字,可以随机起名,叫啥名都可以

$color: #f90;
$border: 1px solid black;

#app{
  background-color:  $color;
  border:$border;
  .container{
    font-size:30px;
  }
}

转化为css后

#app {
  background-color: #f90;
  border: 1px solid black;
}

#app .container {
  font-size: 30px;
}

2.&父选择器 &指向的是父选择器

$color: #f90;
$border: 1px solid black;

#app{
  background-color:  $color;
  border:$border;
  .container{
    font-size:30px;
  }
  a{
    color:blue;
    &:hover{
      color: red;
    }
  }
}

转成css

#app {
  background-color: #f90;
  border: 1px solid black;
}

#app .container {
  font-size: 30px;
}
#app a{
    color : blue
}
#app a:hover {
    color :red
}

3.变量

①.定义变量

$color: #f90;
$border: 1px solid black;

上面声明了名为$color 和$border的变量

②.使用变量

这里就可以直接使用

#app {
    background-color: $color;
  	border: $border;

4.mixins

mixins混入,是代码复用的方式 mixins是一个对象

①定义格式

@mixin 名称 {代码}

②使用格式

include 名称

示例

定义mixin

@mixin content {
  width: 1200px;
  background-color: green;
}

@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

使用mixins

.div {
  width: 200px;
  @include clearfix;
  @include content;
}

5.模块

一个.scss文件就是一个模块，多个.scss文件之间可以相互引用

例如：在base.scss定义变量，然后在test.scss中引入这个文件，就可以使用其中定义的变量了

定义变量定义mixin 通过 @import './user.scss' 引入使用变量,使用mixin的文件中

示例

新建base.scss文件,并定义变量

$color :red ;

在index.scss中引入 base.scss

***@import './base.scss';***
$color: #f90;
$border: 1px solid black;
#app{
  background-color:  $color;
  border:$border;
}

scss的基本使用

概念

使用