前言
CSS 长久以来都是前端工程师最常用的语言之一。随着 Web 应用的日益复杂,CSS 的体积和复杂度不断增加,此时,CSS 预处理器也应运而生。CSS 预处理器可以为 CSS 增加变量、嵌套、Mixin 以及对于代码构建的更强的控制等等。
LESS 和 Sass 是最为流行的两种 CSS 预处理器,而本文将重点探讨与 Sass 相比,LESS 的优势在哪里。
变量
写 CSS 时,遇到频繁使用的颜色或字体等,我们都会想到使用变量的方式。优秀的 CSS 预处理器为我们提供了这种方式,而 LESS 则是其中之一。可以很方便地通过定义一个变量,来代表一个特定的颜色或字体大小。
------ --------------- -------- ------ -- - ------ --------------- -
嵌套规则
CSS 中常常需要为某一个元素嵌套添加多个层级的样式,这会造成代码的冗余。
LESS 通过嵌套规则来降低 CSS 的冗余性。可以很容易地对某一个元素及其子元素已经不需要的样式进行解耦或是覆盖。
-- ----- ----------- - ------------------------- - ----------- -- - ----------- ----- - ------ ----------- - ------------------------- -- - ----------- ----- - -
Mixin
Mixin 是 CSS 预处理器提供的另外一个功能。它类似于一个函数,可以重复使用一段 CSS 代码。
-- -- ----- ---------------- - ------- ----- - -- -- ----- ------- - ----------------- ----------------- ----- -
Mixin 更大的优势是带参数。你可以把一段代码封装成一个 Mixin,依据不同的参数生成不同的 CSS 样式。
---- ----- --- ----------------------- ---- - -------------- -------- ------------------- -------- ---------------------- -------- - ---- ----- --- ---- - --------------------- -
计算能力
LESS 更大的功能之一是它的计算能力。LESS 可以做简单的数学运算,添加和减少,比较和联系。
这个功能可以让你更轻松的进行 CSS 布局,减少两个以上相同的值等错误。
-- ------ ------------- -- ---- - ------ ----- - -------------- -
总结
相比 Sass,LESS 有着更友好的语法规则和更方便的入门体验。而且使用 LESS,没有人会担心和其他 CSS 预处理器的基本概念或常识的不同之处。
同时,LESS 有着非常出色的变量,嵌套,Mixin 和计算功能,能够简洁明了地管理和组织你的 CSS 代码。
这样一篇文章,如何呢,到此结束。希望对你了解 CSS 预处理器及其使用是有帮助的。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6503e7f595b1f8cacd0aaf24