sass语法总结

sass语法

1.变量

• 语法$名字：值;
  • 变量名是 $名字
  • 值不需要引号
• 变量使用
  • 直接使用变量名
• 只要变量值修改，所有是使用这个变量的值都变了
  scss

$color: green;
$fs: 30px;
$border: 10px solid #333;

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

css

div {
  width: 100px;
  height: 100px;
  color: green;
  font-size: 30px;
  border: 10px solid #333;
}

2.注释

• 单行注释 // 在编译的时候不编译，不会显示在css中
• 多行注释/* */ 在编译的时候会保留，在使用gulp打包时 不会 保留
• 强力注释 /*！ */ 在编译和gulp打包时都会保留

3.条件分支

• if 语句
  • 语法：@if 变量 == 值 {样式}
• if else语句
  • 语法：@if 变量 == 值 {样式}@else{样式}
• if else if 语句
  • 语法：@if 变量 == 值 {样式}@else if 变量 == 值 { 样式 }
scss

$type: c;

div {
  width: 100px;

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

}

p {
  height: 200px;

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

}

h1 {
  width: 100px;
  height: 100px;

  @if $type == a {
    color: red;
  } @else if $type == b {
    color: green;
  } @else if $type == c {
    color: skyblue;
  }

}

css

div {
  width: 100px;
}

p {
  height: 200px;
  color: green;
}

h1 {
  width: 100px;
  height: 100px;
  color: skyblue;
}

4.循环分支

for循环

• @for 变量 from 数字1 to 数字2 { 代码 }

• 从数字1到数字2 不包含数字2

• @for 变量 form 数字1 through 数字2 {代码}

  • 从数字1到数字2 包含数字2

• 在循环里面使用变量

  • 在选择器中使用 #{变量}

  • 在样式里面使用 直接写 变量 $名字
scss

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

css

li:nth-child(1) {
  width: 10px;
}

li:nth-child(2) {
  width: 20px;
}

scss

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

css

li:nth-child(1) {
  height: 10px;
}

li:nth-child(2) {
  height: 20px;
}

li:nth-child(3) {
  height: 30px;
}

each循环

• 依赖sass数组使用
  • sass数组
  • 变量：（），（），（），（）
• each的使用
  • @each 变量1, 变量2, ... in 数组
scss

$colorArr: (1, red), (2, green), (3, skyblue), (4, purple), (5, orange), (6, yellow);

@each $index, $color in $colorArr {
  li:nth-child(#{$index}) {
    background-color: $color;
  }
}

css

li:nth-child(1) {
  background-color: red;
}

li:nth-child(2) {
  background-color: green;
}

li:nth-child(3) {
  background-color: skyblue;
}

li:nth-child(4) {
  background-color: purple;
}

li:nth-child(5) {
  background-color: orange;
}

li:nth-child(6) {
  background-color: yellow;
}

5.选择器嵌套

1. 后代选择器嵌套

   • 父级 { 子级 { } }

2. 子代选择器嵌套

   • 父级 { > 子级 {} }

3. 连字符选择器嵌套

• 伪类选择器和伪元素选择器嵌套

• 当你需要的伪类和伪元素和选择器连接再一起的时候

• 使用&连接符操作

• 语法: 选择器 { &:hover {} }

4. 群组选择器的嵌套

   • 群组选择器 { 子级 {} }
   • 选择器 { 群组选择器 {} }
   • 群组选择器 { 群组选择器 {} }

6.属性的嵌套

• 前提： 可以嵌套的属性才可以使用，属性中带有连接符
  • border-left
  • margin-left
  • padding-left
  • background-color
  • background-image
    scss

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

  padding: 10px {
    left: 5px
  };

  margin: {
    left: 3px;
    right: 3px;
  };
}

p {
  border: 10px solid #333 {
    left: 10px dashed pink;
  };
}

span {
  display: block;
  width: 0;
  height: 0;

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

css

div {
  width: 100px;
  height: 100px;
  padding: 10px;
  padding-left: 5px;
  margin-left: 3px;
  margin-right: 3px;
}

p {
  border: 10px solid #333;
  border-left: 10px dashed pink;
}

span {
  display: block;
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom: 10px solid #333;
}

7.混入(混合器/函数)

• 类似JavaScript中的函数
• 定义好一个混合器时，不适用的时候不会被编译，也就是不会显示在css中
• sass的混合器
  • @mixin 混合器名称 {}
    • 直接写函数名称
  • @mixin 混合器名称(形参) {}
  • 所有参数必须传递，不传递会报错
  • @mixin 混合器名称(形参默认值) {}
    • 不传递参数使用默认值，可以传递指定 默认值
• sass的混合器使用
  • @include 混合器名称;
  • @include 混合器名称(实参);

8.继承

• @extend 另一个选择器
scss

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

p {
  // 继承了 div 里面的所有样式
  @extend div; 

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

css

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

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

9.导入

• @import "./地址"

• 可以写一个公共样式文件 所有的变量 所有的混合器

  • 专门定义一个 variable.scss 的文件

  • 这里专门就写所有的变量

  • 专门定义一个mixin.scss 的文件

    • 这里面专门就写所有的混合器