JavaScript学习笔记（五十）——Sass

环境变量

环境变量是一个系统配置。它的作用就是扩大命令的查找范围。

命令行查找规则:

1. 当调用命令时 先查看是否是系统命令
   如果是就使用 如果不是再执行第二步
2. 查看当前目录下是否有对应的可执行文件、批处理文件
3. 查看环境变量中的每一个路径下是否有对用的可执行文件、批处理文件

Sass

什么是Sass？
Sass是CSS的预编译语言。

官网：https://www.sass.hk/

想要使用sass，就必须先安装sass模块：

• 全局sass模块安装
  • npm i sass -g
• 编译命令
  • sass index.scss index.css
• VScode的插件
  • easy sass

Sass的语法

1、定义变量：$variable: value;

01_dingyibianliang.scss文件代码：

$w: 100px;
$h: 100px;

.box{
    width: $w;
    height: $h;
    .box1{
        width: $w;
        height: $h;
    }
}

在集成终端中输入命令：sass 01_dingyibianliang.scss 01_dingyibianliang_css

执行成功后，我们可以发现编译成功。多出了两个文件：01_dingyibianliang.css和01_dingyibianliang.css.map

我们打开01_dingyibianliang.css，可以发现编译成了我们常见的css样式：

.box {
  width: 100px;
  height: 100px;
}
.box .box1 {
  width: 100px;
  height: 100px;
}

/*# sourceMappingURL=01_dingyibianliang.css.map */

2、嵌套式写法：&

02_qiantao.scss文件代码：

.box{
    width: 100px;
    height: 100px;
    color: red;
    &:hover{
        color: blue;
    }
}

在集成终端中输入命令：sass 02_qiantao.scss 02_qiantao.css

编译成功：

编译得到的02_qiantao.css文件代码：

.box {
  width: 100px;
  height: 100px;
  color: red;
}
.box:hover {
  color: blue;
}

/*# sourceMappingURL=02_qiantao.css.map */

3、混合写法：

• @mixin hunhe {}
• .box{ @include hunhe; }

03_hunhe.scss文件代码：

@mixin hunhe{
    width: 100px;
    height: 100px;
}
.box{
    @include hunhe;
}

在集成终端中输入命令：sass 03_hunhe.scss 03_hunhe.css

编译成功：

编译得到03_hunhe.css文件代码：

.box {
  width: 100px;
  height: 100px;
}

/*# sourceMappingURL=03_hunhe.css.map */

4、sass中的方法：

• @mixin fangfa($w: 100px, $h: 100px) { width: $w; height: $h; }
• @include fangfa();

04_fangfa.scss文件代码：

@mixin fangfa($w, $h) {
    width: $w;
    height: $h;
}
.box{
    @include fangfa(100px, 100px);
    .box1{
        @include fangfa(50px, 50ox);
    }
}

在集成终端中输入命令：sass 04_fangfa.scss 04_fangfa.css

编译成功：

编译得到04_fangfa.css文件代码：

.box {
  width: 100px;
  height: 100px;
}
.box .box1 {
  width: 50px;
  height: 50ox;
}

/*# sourceMappingURL=04_fangfa.css.map */

5、方法默认参数值：

05_fangfamorencanshuzhi.scss文件代码：

@mixin  fangfa($w: 100px, $h: 100px) {
    width: $w;
    height: $h;
}
.box{
    @include fangfa(200px, 200px);
    .box1{
        @include fangfa();
    }
}

在集成终端中输入命令：sass 05_fangfamorencanshuzhi.scss 05_fangfamorencanshumorenzhi.css

编译成功：

编译得到05_fangfamorencanshuzhi.css文件代码：

.box {
  width: 200px;
  height: 200px;
}
.box .box1 {
  width: 100px;
  height: 100px;
}

/*# sourceMappingURL=05_fangfamorencanshumorenzhi.css.map */

6、条件分支：@if 表达式 {} @else if 表达式 {} @else {}

06_tiaojianfenzhi.scss文件代码：

@mixin fangfa($w, $h) {
    width: $w;
    height: $h;
    @if $w > 200px{
        color: red;
    } @else if $w > 100px{
        color: green;
    } @else{
        color: blue;
    }
}
.box{
    @include fangfa(250px, 250px);
    .box1{
        @include fangfa(150px, 150px);
        .box2{
            @include fangfa(50px, 50px);
        }
    }
}

在集成终端中输入命令：sass 06_tiaojianfenzhi.scss 06_tiaojianfenzhi.css

编译成功：

便已得到06_tiaojianfenzhi.css文件代码：

.box {
  width: 250px;
  height: 250px;
  color: red;
}
.box .box1 {
  width: 150px;
  height: 150px;
  color: green;
}
.box .box1 .box2 {
  width: 50px;
  height: 50px;
  color: blue;
}

/*# sourceMappingURL=06_tiaojianfenzhi.css.map */

7、循环语句

• @for $i from start to end {} 不包含end
• @for $i from start through end {} 包含end
• @while 表达式 {}

07_xunhuan.scss文件代码：

// while循环
$i: 1;
@while $i < 12 {
    .col-lg-#{$i}{
        width: percentage($i / 12);
    }
    $i: $i + 1;
}

// for循环，从0到11
@for $i from 0 to 12{
    .col-md-#{$i}{
        width: percentage($i / 12);
    }
}

// for循环 从0到12
@for $i from 0 through 12{
    .col-sm-#{$i}{
        width: percentage($i / 12);
    }
}

// each循环
$a: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;
@each $i in $a {
    .box#{$i} {
        width: percentage($i / 10);
    }
}

在集成终端中输入命令：sass 07_xunhuan.scss 07_xunhuan.css

编译成功：

编译得到07_xunhuan.css文件代码：

.col-lg-1 {
  width: 8.3333333333%;
}

.col-lg-2 {
  width: 16.6666666667%;
}

.col-lg-3 {
  width: 25%;
}

.col-lg-4 {
  width: 33.3333333333%;
}

.col-lg-5 {
  width: 41.6666666667%;
}

.col-lg-6 {
  width: 50%;
}

.col-lg-7 {
  width: 58.3333333333%;
}

.col-lg-8 {
  width: 66.6666666667%;
}

.col-lg-9 {
  width: 75%;
}

.col-lg-10 {
  width: 83.3333333333%;
}

.col-lg-11 {
  width: 91.6666666667%;
}

.col-md-0 {
  width: 0%;
}

.col-md-1 {
  width: 8.3333333333%;
}

.col-md-2 {
  width: 16.6666666667%;
}

.col-md-3 {
  width: 25%;
}

.col-md-4 {
  width: 33.3333333333%;
}

.col-md-5 {
  width: 41.6666666667%;
}

.col-md-6 {
  width: 50%;
}

.col-md-7 {
  width: 58.3333333333%;
}

.col-md-8 {
  width: 66.6666666667%;
}

.col-md-9 {
  width: 75%;
}

.col-md-10 {
  width: 83.3333333333%;
}

.col-md-11 {
  width: 91.6666666667%;
}

.col-sm-0 {
  width: 0%;
}

.col-sm-1 {
  width: 8.3333333333%;
}

.col-sm-2 {
  width: 16.6666666667%;
}

.col-sm-3 {
  width: 25%;
}

.col-sm-4 {
  width: 33.3333333333%;
}

.col-sm-5 {
  width: 41.6666666667%;
}

.col-sm-6 {
  width: 50%;
}

.col-sm-7 {
  width: 58.3333333333%;
}

.col-sm-8 {
  width: 66.6666666667%;
}

.col-sm-9 {
  width: 75%;
}

.col-sm-10 {
  width: 83.3333333333%;
}

.col-sm-11 {
  width: 91.6666666667%;
}

.col-sm-12 {
  width: 100%;
}

.box1 {
  width: 10%;
}

.box2 {
  width: 20%;
}

.box3 {
  width: 30%;
}

.box4 {
  width: 40%;
}

.box5 {
  width: 50%;
}

.box6 {
  width: 60%;
}

.box7 {
  width: 70%;
}

.box8 {
  width: 80%;
}

.box9 {
  width: 90%;
}

.box10 {
  width: 100%;
}

/*# sourceMappingURL=07_xunhuan.css.map */

8、引入文件：@import “./xxx”

有一个外部文件common.css，我们需要在08_yinru.scss文件中引入common.css文件：

common.css文件代码：

$w: 100px;
$h: 100px;

08_yinru.scss文件代码：

@import "./common.scss";
.box{
    width: $w;
    height: $h;
}

在集成终端中输入命令：sass 08_yinru.scss 08_yinru.css

编译成功：

编译得到08_yinru.css文件代码：

.box {
  width: 100px;
  height: 100px;
}

/*# sourceMappingURL=08_yinru.css.map */

以上就是sass的一些语法以及编译得到的css文件，当然，如果我们使用编辑器时vscode，我们可以直接使用easy sass插件来帮助我们自动编译。但是如果不是使用该编辑器就可能需要手动使用sass模块编译。