最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

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

HTML 和 CSS：

if … else … 没什么油水

@for 支持两种语法

@for $i from 1 through 12{

/$i in [1,12]/

}

@for $i from 1 to12{

/$i in [1,11]/

}

@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, l i s t 2 , [ list2, [ list2,[separator])：将两个列给连接在一起，变成一个列表；

append($list1, v a l , [ val, [ 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;

l i s t : z i p ( list : zip( list:zip(width, s o l i d , solid, 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

)

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

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

HTML 和 CSS：