SASS基础

css 的预编译语言,用来书写 css 的工具

+ 有两种文件都是用来书写 sass 内容的

1. .sass 后缀的文件

2. .scss 后缀的文件

+ 以上两种方式, 在语法和编译上没有区别

+ 唯一的区别是, {} 和 分号(;)

=> .sass 文件不允许出现 {} 和 ;

=> .scss 文件必须要写 {} 和 ;

sass 需要编译后使用

+ 因为浏览器不认识 .sass 或者 .scss 文件

+ 需要把 .sass 和 .scss 文件编译成 .css 文件再次使用

+ 常见的编译方式

1. 使用编辑器插件

=> vscode 里面有一个叫做 easysass 的插件

=> 你只要安装了这个插件, 你写完的 .sass 和 .scss 文件会自动编译成 .css 文件

=> 缺点: 依赖编辑器

2. 使用一个叫做 sass 的全局系统工具来完成

=> 可以进行编译, 需要你在命令行通过指令的形式

=> 进行文件的编译

3. 打包工具

=> 在项目打包的时候, 可以使用打包功能内的某些功能来编译 sass 文件

=> 打包工具, 不是专门用来编译 sass 文件的

=> 只是对当前项目进行打包的时候, 可以一起编译打包 sass 文件

sass 工具

+ 依赖环境

=> 最早依赖 ruby 环境

=> 后来依赖 python 环境

=> 现在依赖 node 环境

+ 下载:

=> 因为是一个依赖 node 环境的工具

=> 因为是一个全局工具

=> 使用 npm 下载

=> 打开命令行, 目录无所谓

=> 输入指令:

-> win: $ npm install --global sass

-> OS: $ sudo npm install --global sass

+ 检测:

=> 打开命令行, 目录无所谓

=> 输入指令: $ sass --version

+ 卸载:

=> 打开命令行, 目录无所谓

=> 输入指令:

-> win: $ npm uninstall --global sass

-> OS: $ sudo npm uninstall --global sass

sass 的编译

+ 利用我们下载好的全局 sass 工具来编译 .sass 和 .scss 文件

+ sass 编译工具在编译之后会给出一个 map 文件

=> 作用是映射内容到 sass 文件内

1. 单文件编译

+ 打开命令行, 目录切换到你要编译的 sass 文件的目录

+ 输入指令: $ sass 源文件名称 生成的文件名称

+ 缺点: 每次修改都需要重新编译

2. 单文件实时编译

+ 打开命令行, 目录切换到你要编译的 sass 文件的目录

+ 输入指令: $ sass --watch 源文件名称:生成的文件名称

+ 缺点: 一个命令行只能监控一个文件实时编译

3. 文件夹实时编译

+ 打开命令行, 目录切换到你要编译的 sass 文件夹所在的目录

+ 输入指令: $ sass --watch 源文件夹名称:生成的文件夹名称

sass 的变量
+ 在 sass 内是可以定义变量的
+ 定义和使用

变量的定义
=> 语法: $名字: 值;
=> 注意:
-> $ 是名字的一部分
-> 没有等于号, 而是 冒号(:)
-> 值不管是什么, 不需要引号
=> 定义的变量是不会被解析出来的
-> 只有你使用这个变量的时候
-> 会直接把值解析出来

变量的使用
=> 使用在值的位置
-> 直接使用就可以了
-> 记得 $ 是名字的一部分
=> 使用在选择器的位置
-> 不能直接使用
-> 需要使用变量, 需要写 #{ 变量 }
*/

// 定义变量
$bg_color: skyblue;
$b: 1px solid #333;
$n: 10;
// 在值的位置使用变量
div {
background-color: $bg_color;
}

p {
color: $bg_color;
}

h1 {
border: 1px solid $bg_color;
}

h2 {
border: $b;
}

// 在选择器的位置使用变量
li:nth-child(#{$n}) {
color: red;
}

.box.#{ $bg_color } {
font-size: 10px;
}

  sass 的循环

  1. for 循环
    + 语法: @for 变量 from 开始数字 to 结束数字 { 内容 }
    + 变量就表示 从 开始数字 到 结束数字 的每一个内容
    + 注意: 包含开始数字, 不包含结束数字

  2. for 循环
    + 语法: @for 变量 from 开始数字 through 结束数字 { 内容 }
    + 变量就表示 从 开始数字 到 结束数字 的每一个内容
    + 注意: 包含开始数字, 也包含结束数字

  3. each 循环
    + 如何定义一个数组
      => 语法: $arr: 值1, 值2, 值3, ...
    + 语法: @each 变量 in 数组 {}
    + 变量就表示数组中的每一个值
*/

// 1. for to 循环
// @for $n from 1 to 5 {
//   // 在这个循环内, $n 就分别是 1 2 3 4
//   li:nth-child(#{ $n }) {
//     width: 100px;
//     left: $n * 100px;
//   }

//   .box#{ $n } {
//     width: 100px;
//   }
// }

// @for $n from 1 to 5{
//   li:nth-child(#{$n}){
//     width: 100px;
//     left: $n *100px;
//   }
// }


// 2. for through 循环
// @for $n from 1 through 5 {
//   // 在这个循环内, $n 就分别是 1 2 3 4 5
//   li:nth-child(#{ $n }) {
//     left: $n * 100px;
//     top: $n * 100px;
//   }
// }


// 3. each 循环
// 3-1. 定义一个数组
$colorArr: red, skyblue, orange, green, yellow;

// 3-2. 循环 $colorArr 这个数组
@each $item in $colorArr {
  // 配套语法:
  // index(数组, 项)
  // 返回值: 项在该数组中的索引位置
  $index: index($colorArr, $item);
  // $index 拿到的值分别是 1 2 3 4 5

  li:nth-child(#{ $index }) {
    background-color: $item;
  }
}

sass 的嵌套,可以把 css 写的像 html 一样有层级结构
div.banner {
  width: 300px;
  height: 300px;

  p {
    width: 200px;
    height: 200px;

    span {
      width: 100px;
      height: 100px;
      display: block;

      a {
        font-size: 20px;
        color: red;
      }
    }
  }
}

/*
  sass 的混入
    + 也叫作混合器, 也叫作 "函数"
    + 定义混合器 和 使用混合器
*/

/*
  1. 基本混合器
    + 定义: @mixin 混合器名称 { 混合器样式 }
    + 使用: @include 混合器名称;
    + 缺点: 不够灵活, 定义都是准确的几个属性
*/

// 1. 定义基本混合器
// @mixin trans {
//   -webkit-transition: all 1s 0s linear;
//   -moz-transition: all 1s 0s linear;
//   -ms-transition: all 1s 0s linear;
//   -o-transition: all 1s 0s linear;
//   transition: all 1s 0s linear;
// }

// @mixin flex {
//   display: flex;
//   justify-content: center;
//   align-items: center;
// }

// 基本混合器的使用
// div {
//   width: 100px;
//   height: 100px;
//   @include flex;

//   &:hover {
//     width: 200px;
//     height: 200px;
//     @include trans;
//   }
// }

// h1 {
//   color: red;

//   &:hover {
//     color: skyblue;
//     @include trans;
//   }
// }


/*
  2. 带有参数的混合器
    + 定义: @mixin 混合器名称(参数1, 参数2, ...) {}
    + 使用: @include 混合器名称(值1, 值2, ...)
      => 注意: 你写了多少个形参, 就得写多少个实参
    + 缺点: 必须每一个参数都传递
*/

// 2. 才有参数的混合器定义
// @mixin trans($p, $t, $d, $tf) {
//   -webkit-transition: $p $t $d $tf;
//   -moz-transition: $p $t $d $tf;
//   -ms-transition: $p $t $d $tf;
//   -o-transition: $p $t $d $tf;
//   transition: $p $t $d $tf;
// }

// // 使用混合器
// div {
//   width: 100px;
//   height: 100px;

//   @include trans(all, 1s, 0s, linear);
// }

// h1 {
//   width: 200px;
//   height: 200px;

//   @include trans(width, 2s, 1s, ease-in);
// }


/*
  3. 带有形参默认值的混合器
    + 定义: @mixin 混合器名称(形参1: 默认值, 形参2: 默认值, ...) {}
    + 使用:
      => @include 混合器名称(实参1, 实参2);
        -> 可以不全部填写, 没有写的会有默认值使用
      => @include 混合器名称(形参1: 值);
        -> 指定给某一个形参赋值, 剩下的使用默认值
*/

// 3. 定义带有参数默认值的混合器
@mixin trans($p: all, $t: 1s, $d: 0s, $tf: linear) {
  -webkit-transition: $p $t $d $tf;
  -moz-transition: $p $t $d $tf;
  -ms-transition: $p $t $d $tf;
  -o-transition: $p $t $d $tf;
  transition: $p $t $d $tf;
}

// 使用带有参数默认值的混合器

div {
  width: 100px;
  height: 100px;
  @include trans();
}

h1 {
  @include trans(width);
}

h2 {
  @include trans(width, 2s);
}

h3 {
  @include trans(width, 2s, 1s);
}

h4 {
  @include trans(width, 2s, 1s, ease-in-out);
}

h5 {
  // 表示使用 trans 混合器
  // 只是单独给 $tf 变量赋值为 ease-in
  // 其他参数都使用默认值
  @include trans($tf: ease-in);
}

sass 的继承,让一个规则集使用另一个规则集的样式内容,语法: @extend 选择器;

div {
  width: 10px;
  height: 10px;
  margin: 10px;
  padding: 10px;
  border: 10px solid #333;
  background-color: skyblue;
  color: red;
  font-size: 10px;
  line-height: 10px;
  font-weight: 700;
}

p {
  // 当你希望使用和 div 内一样的样式的时候
  // 直接继承 div 的内容
  @extend div;

  width: 200px;
  margin: 30px;
  transition: all 1s 2s linear;
}

h1 {
  @extend p;

  margin: 20px;
}

sass 的导入, @import "地址";

@import "./mixin.scss";