这里是修真院前端小课堂,每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能,本篇分享的是:
【SASS和LESS是什么?如何使用? 】
大家好,我是IT修真院北京分院第20期的学员王野,一枚正直纯洁善良的程序员
今天给大家分享一下,修真院官网JS任务4,深度思考中的知识点——SASS和LESS是什么?如何使用?
一、背景介绍
CSS是我们学习前端开发必须掌握的技巧,叫做层叠样式表。
你可以用它开发网页样式,但是又一个很大的不足,就是没办法编程。也就是说,
CSS基本上是设计师的工具,不是程序员的工具。在程序员眼里,
CSS是一件很麻烦的东西。它没有变量,也没有条件语句,
只是一行行单纯的描述,写起来相当费事。
很自然地,有人就开始为CSS加入编程元素,
这被叫做"CSS预处理器"(css preprocessor)。通俗来讲:
“CSS预处理器用一种专门的编程语言,进行Web页面样式的设计,
然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,
无需考虑浏览器的兼容性问题”。
二、知识剖析
2.1 LESS是什么?
根据维基百科上的介绍,其实 LESS 是 Alexis Sellier 受 SASS 的影响创建的开源项目。
当时 SASS 采用了缩进作为分隔符来区分代码块,而不是 CSS 中广为使用的括号。
为了让 CSS 现有用户使用起来更为方便,Alexis 开发了 LESS 并提供了类似的功能。
在一开始,LESS 的解释器也同样是由 Ruby 编写,
后来才转而采用了 JavaScript. LESS 代码既可以运行在客户端,也可以运行在服务器端。
在客户端只要把 LESS 代码和相应的 JavaScript 解释器在同一页面引用即可;
而在服务器端,LESS 可以运行在 Node.js 上,也可以运行在 Rhino 这样的
JavaScript 引擎上。
2.2 如何使用LESS?
LESS语法
LESS 做为 CSS 的一种形式的扩展,它并没有减少 CSS 的功能,
而是在现有的 CSS 语法之