sass的基础语法

sass 的变量

再 sass 里面定义一个变量
一次定义多次使用
语法: $名字: 值;
注意:
=> 你的变量名是 $名字
=> 值不需要引号
使用:
=> 直接使用变量名就可以了
只要变量的值修改了
=> 那么所有使用这个变量的位置就都修改了
例子：

// 定义了一个叫做 $color 的变量, 值是 pink
$color: green;
$fs: 30px;
$border: 10px solid #333;

div {
  width: 100px;
  height: 100px;
  color: $color;
  font-size: $fs;
  border: $border;
}

---

sass 的注释

// 1. 单行注释, 再编译的时候不进行编译
div {
  // 下面设置的是 元素的 宽度
  width: 100px;
}

/*
  2. 多行注释
    => 再编译的时候会保留
    => 再使用 gulp 打包的时候不会保留
*/

/*!
  3. 强力注释
    => 再编译的时候会保留
    => 再使用 gulp 打包的时候也会保留
*/

---

sass 的条件分支语句

  其实就是
    => if 语句
    => if else 语句
    => if else if 语句
  依赖于变量使用
    => if 语句
      -> 语法: @if 变量 == 值 { 样式 }
    => if else 语句
      -> 语法: @if 变量 == 值 { 样式 } @else { 样式 }
    => if else if 语句
      -> 语法: @if 变量 == 值 { 样式 } @else if 变量 == 值 { 样式 }

例子：

// 准备一个变量
$type: c;

div {
  width: 100px;

  @if $type == a {
    color: red;
  }

}
--------------------------------------------------------------------------------

sass 的循环语句

for 循环

    => 依赖变量使用
    => 语法: 有两种
      1. @for 变量 from 数字 to 数字 { 代码 }
        -> 包含开始数字, 不包含结束数字
        -> 在循环里面使用变量
          => 再选择器中使用 #{变量}
          => 再样式里面使用 变量
      2. @for 变量 from 数字 through 数字 { 代码 }
        -> 包含结束数字
        -> 在循环里面使用变量
          => 再选择器中使用 #{变量}
          => 再样式里面使用 变量

例子：

/* for 循环 */
这个循环的数字变化是 1 2, 不包含 3
@for $i from 1 to 3 {
  li:nth-child(#{$i}) {
    width: 10px*$i;
  }
}

each 循环

    => 依赖一个 sass 数组使用
    => 写一个 sass 数组
      -> 语法: 变量: (), (), (), (), ...
    => each 的使用
      -> 语法: @each 变量1, 变量2, ... in 数组

例子：

/* each 循环 */
// 准备一个数组
//   每一个小括号就是数组里面的每一项
$arr: (1, 5px, red), (2, 6px, green), (3, 9px, skyblue);

// // 写一个循环
@each $index, $fs, $color in $arr {
  li:nth-child(#{$index}) {
    font-size: $fs;
    color: $color;
  }
}

---

sass 的选择器嵌套

和 html 一样让选择器也有一个上下级的关系
1. 后代选择器嵌套
=> 语法: 父级 { 子级 {} }
2. 子代选择器嵌套
=> 语法: 父级 { > 子级 {} }
3. 连字符选择器嵌套
=> 伪类选择器和伪元素选择器嵌套
=> 当你需要的伪类和伪元素和选择器连接再一起的时候
=> 使用 & 连接符操作
=> 语法: 选择器 { &:hover {} }

例子：

div {
  width: 100px;
  height: 100px;

  // 当鼠标悬停的时候 宽度改变
  &:hover {
    width: 200px;
  }

  &::before {
    content: '';
  }
}

4. 群组选择器的嵌套(使用太少)
   => 语法: 群组选择器 { 子级 {} }
   => 语法: 选择器 { 群组选择器 {} }
   => 语法: 群组选择器 { 群组选择器 {} }

---

sass 属性的嵌套

属性嵌套

+ 前提: 可以嵌套的属性才能使用
  => 就是属性中带有中划线的属性
  => border-left
  => margin-left
  => padding-left
  => background-color
  => background-image
+ 语法:  以 padding 为例
  padding: 10px; 上下左右
  padding: 10px 10px; 上下 左右
  padding: 10px 10px 10px 10px; 上 右 下 左
  padding: 10px {
    left: 5px;
  };

例子：

border: 10px solid transparent {
    bottom: 10px solid #333;
  };
}

---

sass 的混入(混合器/函数) mixin

混合器, 就是类似于 js 里面的函数
    + js 的函数 function 函数名(形参) {}
    + sass 的混合器
      => 语法: @mixin 混合器名称 {}
      => 语法: @mixin 混合器名称(形参) {}
      => 语法: @mixin 混合器名称(形参默认值) {}
    + sass 的混合器的使用
      => 语法: @include 混合器名称;
      => 语法: @include 混合器名称(实参);
注意：不使用的时候是不会被编译的

例子：、

/* 使用方式三 */
//   再定义混合器的时候可以传递一个参数默认值
//   你如果传递了实参, 就用你传递的
//   如果你没有传递实参, 那么就是用默认值
@mixin transition($t: 1s, $p: all, $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 transition; // 不用传递参数, 所有的都用默认值
}

p {
  width: 100px;
  height: 100px;

  // 使用这个带有参数默认值的混合器
  @include transition(2s); // 只传递第一个参数
}

---

sass 的继承

sass 里面的继承就是使用另一个规则集的样式
    + 当你在写一个样式的时候
      => 你发现和之前写的一个规则集的样式一摸一样
      => 就把刚才写的直接拿下来
    + 语法:
      => @extend 另一个选择器

例子：

div {
  width: 100px;
  height: 100px;
  padding: 10px;
  margin: 20px;
}

p {
  // 继承了 div 里面的所有样式
  @extend div; // 各个同学用的都比较少

  padding: 20px;
  border: 10px solid #333;
}

---

sass 的导入

导入: 就是把别的文件拿到我这里执行
    + 平时开发的时候
      => 会写一个 base.css 的文件
        -> * { margin: 0; padding: 0; }
        -> 公共样式文件
        -> 这个公共样式文件每个 html 文件都会引入
        -> 在公共文件里面把我们所有需要用到的变量都定义好
      => 你再写每一个文件的时候
        -> 只要导入这个 base.scss 就有了公共样式和这些变量
    + 导入的语法:
      => 语法: @import "你要导入的文件名称";
    + 还有一种使用方式
      => 专门定义一个 variable.scss 的文件
        -> 这里专门就写所有的变量
      => 专门定义一个 mixin.scss 的文件
        -> 这里面专门就写所有的混合器

中国加油！武汉加油！千峰加油！我自己加油！