2024年Web前端最全Sass(Scss)基础梳理与实践(1)，前端项目面试

总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。

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

万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

前端面试题汇总

JavaScript

性能

linux

前端资料汇总

前端工程师岗位缺口一直很大，符合岗位要求的人越来越少，所以学习前端的小伙伴要注意了，一定要把技能学到扎实，做有含金量的项目，这样在找工作的时候无论遇到什么情况，问题都不会大。

效果：在.container上生效

---

直接子选择器

先选择最靠近的那个子元素，如果这子元素符合匹配要求，则选中这个子元素

html：

我是一段话

我是一段话

scss:

div {

// 父选择器

&.container {

width: 100px;

height: 100px;

border: 1px solid #ccc;

margin: 100px auto;

// 直接子选择器

.p1 {

color: red;

}

}

}

效果：只有.p1生效

---

模块使用

---

变量

全局变量 vs 局部变量

用$符号来标识一个变量，局部变量只能在离定义处最近的{}内有效，全局变量则全局有效

全局变量：

$font-color : red; // 全局变量

.container {

margin: 20px auto;;

p {

color: $font-color;

}

}

编译效果：

.container {

margin: 20px auto;

}

.container p {

color: red;

}

局部变量：

.container {

$font-color : red; // 局部变量

margin: 20px auto;;

p {

color: $font-color;

}

}

span {

color: $font-color; // 使用局部变量，在此无效

}

编译报错：span中不能使用$font-color变量

---

数据类型

在Sass(Scss)中，数据类型可以是：数字（包括像素值如10px、10pt等）、字符串、颜色值、布尔值、数组Lists、Maps

官网给出了归纳和举例：

就像这样，做一个小小的变量提取（此处提取颜色和数字）：

$p-color : red;

$margin-tb : 20px;

.container {

margin: $margin-tb auto;

p {

color: $p-color;

}

}

编译后变成：

.container {

margin: 20px auto;

}

.container p {

color: red;

}

与前面一致

也可以把整个$margin-tb当作Lists来看待，不用一个个分开写。

$p-color : red;

$margin-tb : 20px auto; // Lists

.container {

margin: $margin-tb;

p {

color: $p-color;

}

}

编译结果与前一致

Lists就是一个组合数据类型，各项之间由空格隔开，如果每一项还是组合内容的话，可以用括号括起来。

$gradients : (to left top, blue, red) (to left top, blue, yellow); // Lists

Maps是键值对，也是组合型数据类型，类似js中的对象，但把对象的花括号改成了圆括号

就像这样：

$content : (“p”:“padding”, “m”:“margin”);

$direction 😦‘t’:“top”, ‘b’:“bottom”, “l”:“left”, “r”:“right”);

关于Lists和Maps的其他用法，在后面的“Lists和Maps的使用”部分会提到

---

@mixin语法

@mixin语法可以帮助我们复用一些功能相同的代码，设置默认样式，就像这样：

将字体颜色单独抽出来，保存在新文件_mixin.scss中：

// 以传递过来的color为底色，调节饱和度，默认调节比例为20%

@mixin font-color($color, $amount:20%) {

color: saturate($color, $amount); // saturate为调节饱和度的Sass内置函数

}

在index.scss中引入并使用：

@import “./mixin”;

.container {

margin: 20px auto;;

p {

@include font-color(#464); // 复用一

}

}

span {

@include font-color(#333, 40%); // 复用二

}

编译结果：

.container {

margin: 20px auto;

}

.container p {

color: #337733;

}

span {

color: #471f1f;

}

---

!default语法

可以在变量的结尾添加 !default 给一个未通过 !default 声明赋值的变量赋值，此时，如果变量已经被赋值，不会再被重新赋值，但是如果变量还没有被赋值，则会被赋予新的值。

背景：

在上一个小demo中，我们把_mixin.scss的变量引入到index.scss中

我们知道@import一般写在最前面，按顺序来看，会先解析import进来的样式，再解析index.scss的样式，存在覆盖样式的情况，但我们希望优先使用import进来的样式，此时，可以使用!default语法

ps：给某个变量设置!default，当import进来的代码里存在同名变量，优先使用import进来的，如果没有同名变量，就使用本文件中设置的

就像这样：

// _mixin.scss :设置与index.scss的同名全局变量

$fontSize : 20px;

// 以传递过来的color为底色，调节饱和度，默认调节比例为20%

@mixin font-color($color, $amount:20%) {

color: saturate($color, $amount);

}

index.scss：

@import “./mixin”;

$fontSize : 14px !default;

.container {

margin: 20px auto;;

p {

@include font-color(#464); // 复用一

font-size: $fontSize;

}

}

编译后：字体size为_mixin.scss中设置的20px

.container {

margin: 20px auto;

}

.container p {

color: #337733;

font-size: 20px;

}

---

函数

内置函数

Sass中有很多内置函数，在官网文档中有详细解释，此处仅列举几个

| 函数 | 功能 |

| — | — |

| adjust-hue($color, $degrees) //=> color | 将颜色color旋转某角度（色轮），

degree为正数时代表按顺时针旋转，

degree为负数时代表按逆时针旋转 |

| lighten($color, $amount) //=> color | 提高颜色亮度 |

| darken($color, $amount) //=> color | 降低颜色亮度 |

| saturate($color, $amount) //=> color | 提高颜色饱和度 |

| desaturate($color, $amount) //=> color | 降低颜色饱和度 |

$amount：百分比，范围：[0%, 100%]

案例：

.container {

$font-color:#464; // 局部变量

margin: 20px auto;;

p {

color: saturate($font-color, 20%); // 提高饱和度20%

}

}

编译结果：

.container {

margin: 20px auto;

}

.container p {

color: #337733;

}

---

Lists和Maps的使用

---

使用Lists和Maps时，常常会用到以下语法，分别是：

• 字符串插值语法：#{}

• @if语法

• @for语法

• @each语法

• nth语法

字符串插值语法：#{}

功能类似于es6中的模板字符串：反引号和${}，就像这样：

html：

我是一段话

scss：

$fontSize : 14px !default;

$direction:“top”;

.container {

width: 100px;

height: 100px;

border: 1px solid #ccc;

margin-#{$direction}: 200px; // 使用字符串插值

p {

font-size: $fontSize;

@include font-color(#464);

}

}

编译结果：

.container {

width: 100px;

height: 100px;

border: 1px solid #ccc;

margin-top: 200px; // 字符串插值生效

}

.container p {

font-size: 20px;

color: #337733;

}

效果：

@if语法

类似if…else语法

$fontSize : 22px;

.container {

width: 100px;

height: 100px;

border: 1px solid #ccc;

margin: 20px auto;

p {

// 如果指定的字号大小大于20px则用指定值，否则固定为16px

@if ($fontSize > 20px){

font-size: $fontSize;

}

@else {

font-size: 16px;

}

}

}

编译结果：

.container {

width: 100px;

height: 100px;

border: 1px solid #ccc;

margin: 20px auto;

}

.container p {

font-size: 22px; // 字号生效

}

---

@for语法

快速写出有规律的样式

.container {

@for $i from 1 through 5 {

.m-t-#{$i*5} {

margin-top : $i*5px;

}

}

}

编译结果：

.container .m-t-5 {

margin-top: 5px;

}

.container .m-t-10 {

margin-top: 10px;

}

.container .m-t-15 {

margin-top: 15px;

}

.container .m-t-20 {

margin-top: 20px;

}

.container .m-t-25 {

margin-top: 25px;

}

---

@each语法与nth语法

@each语法：遍历Maps或Lists中的每一项

nth语法：提取Maps或Lists中的第n项，n从1开始

用@each遍历Maps：

// 遍历Maps

.container {

$direction 😦‘t’:“top”, ‘b’:“bottom”, “l”:“left”, “r”:“right”);

@each $dir in $direction { // 遍历direction中的每一项

@for $i from 1 through 3 {

.m-#{nth(KaTeX parse error: Expected 'EOF', got '}' at position 8: dir, 1)}̲-#{i*5} { // nth取$dir的第1项，即t、b、l、r

margin-#{nth($dir, 2)} : $i * 5px;

// nth取第i个的第2项，即top、bottom、left、right

}

}

}

}

编译结果：

.container .m-t-5 {

margin-top: 5px;

}

.container .m-t-10 {

margin-top: 10px;

}

.container .m-t-15 {

margin-top: 15px;

}

计算机网络

• HTTP 缓存

• 你知道 302 状态码是什么嘛？你平时浏览网页的过程中遇到过哪些 302 的场景？

• HTTP 常用的请求方式，区别和用途？

• HTTPS 是什么？具体流程

• 三次握手和四次挥手

• 你对 TCP 滑动窗口有了解嘛？

• WebSocket与Ajax的区别

• 了解 WebSocket 嘛？

• HTTP 如何实现长连接？在什么时候会超时？

• TCP 如何保证有效传输及拥塞控制原理。

• TCP 协议怎么保证可靠的，UDP 为什么不可靠？

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

算法

• 链表

• 字符串

• 数组问题

• 二叉树

• 排序算法

• 二分查找

• 动态规划

• BFS

• 栈

• DFS

• 回溯算法