2024年前端最新Sass进阶一(1)，字节跳动前端面试

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

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

高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

}

@while也与一般语言相似，只要后面的表达式为true便可以继续循环

@each与javascript里面的forEach类似

@each $key in $list{

/*

$key…

*/

}

②、sass支持强大的函数功能

自定义函数@function

@function numbers($number){

@if $number > 10{

@return “yes”;

}@else {

@return “no”;

}

}

字符串函数

unquote($string) 去除字符串的引号

quote($string) 添加引号

to-upper/lower-case($string) 字符串格式化

数学函数

percentage($value)：将一个不带单位的数转换成百分比值；

round($value)：将数值四舍五入，转换成一个最接近的整数；

ceil($value)：将大于自己的小数转换成下一位整数；

floor($value)：将一个数去除他的小数部分；

abs($value)：返回一个数的绝对值；

min($numbers…)：找出几个数值之间的最小值；

max($numbers…)：找出几个数值之间的最大值；

random(): 获取随机数

列表函数

length($list)：返回一个列表的长度值；

nth($list, $n)：返回一个列表中指定的某个标签值

join($list1, $list2,[$separator])：将两个列给连接在一起，变成一个列表；

append($list1, $val,[$separator])：将某个值放在列表的最后；

zip($lists…)：将几个列表结合成一个多维的列表；

index($list, $value)：返回一个值在列表中的位置值。

注意： length函数中的列表必须要以空格来相隔，否则cmd会报错(但经我测试我的电脑并没有报错)

nth函数下标从1开始

join只能连接两个列表，可选择连接后的列表的分隔方式，建议指定[separator]，否则输出会乱，comma(,) space(空格)；返回一个新的list

zip函数将所有列表的同一索引的值

$width: 1px 2px 3px;

$solid: solid dashed solid;

$color: black blue red;

$list:zip($width,$solid,$color);

.box{

border: nth($list, 1);

}

/结果/

.box {

border: 1px solid black; }

index查找不到会返回false

Map函数

Sass有一种类似JSON的数据，也就是类似javascript的对象，称作map，语法如下：

$map(

$key1: value1,

$key2: value2,

$key3: value3

)

map可以嵌套

map-get($map, $key) /返回map[key]/

map-merge($map1, $map2) /合并map/

map-remove($map, $key) /remove map[key]/

map-keys($map) /返回所有的keys/

map-values($map) /返回所有的value/

map-has-key($map) /map[key] 存在？/

学习笔记

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等

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

HTML/CSS

**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分

**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式

HTML5 /CSS3

**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性

**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

属性，CSS3新增单位，弹性盒模型

[外链图片转存中…(img-gADQhIEc-1715586118380)]

JavaScript

**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串

[外链图片转存中…(img-2meBlm5H-1715586118381)]