2024年最新sass语法总结(2)，字节跳动四面技术面

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 直接使用变量名

• 只要变量值修改，所有是使用这个变量的值都变了

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. 群组选择器的嵌套
   总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；

} }`

4. 群组选择器的嵌套
   总结:

• 函数式编程其实是一种编程思想，它追求更细的粒度，将应用拆分成一组组极小的单元函数，组合调用操作数据流；

• 它提倡着 纯函数 / 函数复合 / 数据不可变， 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用；

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

Tips:

其实我们很难也不需要在面试过程中去完美地阐述出整套思想，这里也只是浅尝辄止，一些个人理解而已。博主也是初级小菜鸟，停留在表面而已，只求对大家能有所帮助，轻喷🤣；

我个人觉得: 这些编程范式之间，其实并不矛盾，各有各的 优劣势。

理解和学习它们的理念与优势，合理地 设计融合，将优秀的软件编程思想用于提升我们应用；

所有设计思想，最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用，开发更为高效和安全；