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样式预处理的一些常用技巧”