本文正在参加「金石计划 . 瓜分6万现金大奖」

老王最近跟我吐槽为啥同样做一个功能模块，他写了20000行代码而同事只用6000行就搞定了！其实啊，是css在作怪，我一看老王的页面，1000多行代码，css占了70%。为了提高代码质量，降低代码量，我决定带老王重学一下css。那作为css预处理器功能最全的SCSS，是我们的首选。

说起css预处理器，我想大家都会的一定是样式嵌套吧？这个就不在这边展示了，如果这个还不会，说明你没用过css预处理器。

for 代码缩减利器

看看如下代码：

你看html都可以for，那scss为啥就不循环一下呢？

@for ... from ... to

scss for循环有两种写法，第一种是@for ... from ... to，这种是前闭后开：

@for ... from ... through

我个人倾向于使用这个，前闭后闭更符合我们的思维逻辑：

老王：？？？这个to和through我明白了，我不明白的是下面这些是什么？

scss里面的对象和模板字符串

我们知道，在scss中可以定义变量，在我们刚刚的例子中，$colors和$i都属于变量。只不过他们的值不同，一个是对象，一个是数字。

在scss中定义一个对象（或者称之为map映射关系）

可以看到，我们是用小括号包裹住一系列键值对的方式来定义对象的。对象的取值是通过map-get或者map.get(使用这个需要显示申明@use "sass:map") 。使用对象取值的时候我们传的第一个参数是目标对象，第二个参数是对象的key.

深层嵌套的对象如何取值？

我们定义$colors的时候，给第一个又嵌套了一个对象，那么它取值的方式就像下面这样：

如果继续嵌套，取值就再往后面加参数就是了，很简单。这边又引入了if else语句。一看就会了！咱们回到刚刚的问题，#{$i}是什么玩意儿？

scss中的模板字符串

我们在js中使用模板字符串是这样：

`${i}`

那现在看scss模板字符串是不是有点熟悉了，只是用的是#而不是$而已。至于为啥不是$？因为$是拿来定义变量的！

模板字符串常用于定义动态选择器，或者css属性。更多用法留给大家去探索。

今天的分享就到这。后续我会持续更新关于scss的学习心得和经验。欢迎关注！