Sass / Scss 样式预处理的一些常用技巧

前言

现在,样式预处理语言已经成了前端进行页面布局编写样式的标配辅助工具,当前已经基本没人去手写纯 css 样式了,在众多样式预处理语言当中,Sass / Scss 及 Less 是最多人使用的样式预处理语言。本文主要是介绍使用 Sass 预处理的一些常用技巧。

使用 Sass 的一些常用技巧

一、@at-root 的使用可以让你突破所在的作用域

我们在编写 sass 时,一般是喜欢让 css 代码形成深度的树结构,但有时如果我们为了不想 sass 给我们生成的 css 样式层次太深(原则是不超过 3 层结构,如:.root .parents .children {color:red;}),想把特定的 css 样式与根节点脱离开来,此时,我们可以使用 Sass 的 @at-root 来实现我们想要的效果,顾名思义,at root 就是让生成的 css 代码以此节点为根节点,不受外层节点影响,但不影响你按树结构来书写 css 代码,sass 代码如下: 继续阅读“Sass / Scss 样式预处理的一些常用技巧”