前端系列-5 SCSS使用介绍

背景

Sass作为一种强化CSS的辅助工具，提供了变量、嵌套、混合、继承、导入等功能，是的CSS代码更具可维护性。文件有两种格式：一种以.scss为文件后缀，语法与css相似，使用分号换行，使用大括号包裹样式；一种以.sass为文件后缀使用缩进代替大括号，使用换行代替分号。

由于scss与css语法更接近，本文基于SCSS以案例的形式介绍其常用功能，其他用法请参考:https://www.sass.hk/docs/。案例涉及sass工具，安装和使用方式如下:

# 安装sass转换器
npm install -g sass 

# 借助sass转换器可以将sass或者scss文件转换为css文件
sass input.scss output.css

1.变量的定义和使用

使用$符号定义和使用变量，可以提取公共的配置，减少代码重复度。

$height_size: 100%;

html {
  height: $height_size;
}

body {
  height: $height_size;
}

#app {
  height: $height_size;
}

运行sass demo.scss demo.css指令，得到demo.css文件，内容如下:

html {
  height: 100%;
}

body {
  height: 100%;
}

#app {
  height: 100%;
}

/*# sourceMappingURL=demo.css.map */

说明: 使用/* */进行多行注释，使用//进行单行注释。

2.嵌套

ul {
 background-color: grey;
 
 li{
  background-color: blue;
  height: 100px;
 }
 p {
  background-color: yellow;
 }
}

经过sass指令转换后，内容如下:

ul {
  background-color: grey;
}

ul li {
  background-color: blue;
  height: 100px;
}

ul p {
  background-color: yellow;
}

/*# sourceMappingURL=demo.css.map */

3.混合

与函数类似，使用@mixin定义模板，且模板支持参数，在使用的地方通过@include引入：

@mixin bgcolor(){
 background-color: grey;
 height: 100px;
}


ul {
 @include bgcolor();
 
 li{
  @include bgcolor();
 }
 
 p {
  @include bgcolor();
 }
}

编译后得到:

ul {
  background-color: grey;
  height: 100px;
}
ul li {
  background-color: grey;
  height: 100px;
}
ul p {
  background-color: grey;
  height: 100px;
}
/*# sourceMappingURL=demo.css.map */

@mixin定义时支持参数，多个之间使用逗号分隔，如下所示:

@mixin bgcolor($color, $height){
 background-color:$color;
 height: $height;
}

ul {
 @include bgcolor(grey,200px);
 
 li{
  @include bgcolor(blue,150px);
 }
 
 p {
  @include bgcolor(yellow,50px);
 }
}

编译后得到:

ul {
  background-color: grey;
  height: 200px;
}
ul li {
  background-color: blue;
  height: 150px;
}
ul p {
  background-color: yellow;
  height: 50px;
}
/*# sourceMappingURL=demo.css.map */

说明：@mixin中也可以使用@include导入另一个@mixin.

4.继承

通过@extend可以继承其他css样式，案例如下所示:

.default-cl-ht {
 background-color: grey;
 height: 100px;
}

ul {
 height: 101px;
 @extend .default-cl-ht;
 
 li{
  @extend .default-cl-ht;
  height: 102px;
 }
 
 p {
  @extend .default-cl-ht;
 }
}

编译后得到:

.default-cl-ht, ul p, ul li, ul {
  background-color: grey;
  height: 100px;
}

ul {
  height: 101px;
}
ul li {
  height: 102px;
}
/*# sourceMappingURL=demo.css.map */

继承而来的样式优先级低于自己内部定义的样式，与定义的顺序无关。

5.&使用

使用&符号来引用父选择器，可以减少重复代码，案例如下所示:

.title-icon {
 width: 60px;
 &-contain {
  width: 50px;
  &-head{
   width: 10px;
  }
  &-body{
   width: 40px;
  }
 }
}

编译结果如下:

.title-icon {
  width: 60px;
}
.title-icon-contain {
  width: 50px;
}
.title-icon-contain-head {
  width: 10px;
}
.title-icon-contain-body {
  width: 40px;
}
/*# sourceMappingURL=demo.css.map */

说明：每个&表示其外层父选择其；

6.文件导入

使用@import可以根据相对路径导入其他scss文件，如下所示:

@import './var.scss';

@import './common.scss';

7.vue3中使用scss

vue3支持scss，直接在style中指定scss即可，如下所示:

<style lang="scss">
    $height_size: 100%;
    #app {
     height: $height_size;
    }
</style>