sass语法总结

$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 混合器名称(实参);

专业技能

一般来说，面试官会根据你的简历内容去提问，但是技术基础还有需要自己去准备分类，形成自己的知识体系的。简单列一下我自己遇到的一些题

• HTML+CSS

• JavaScript

• 前端框架

• 前端性能优化

• 前端监控

• 模块化+项目构建

• 代码管理

• 信息安全

• 网络协议

• 浏览器

• 算法与数据结构

• 团队管理

最近得空把之前遇到的面试题做了一个整理，包括我本人自己去面试遇到的，还有其他人员去面试遇到的，还有网上刷到的，我都统一的整理了一下，希望对大家有用。

其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器等等

由于文章篇幅有限，仅展示部分内容