css 预处理器
为什么要有 css 预处理器
css基本上是设计师的工具，不是程序员的工具。在程序员的眼里，css是很头痛的事情，它并不像其它程序语言，比如说php、javascript等等，有自己的变量、常量、条件语句以及一些编程语法，只是一行行单纯的属性描述，写起来相当的费事，而且代码难以组织和维护。
很自然的，有人就开始在想，能不能给css像其他程序语言一样，加入一些编程元素，让css能像其他程序语言一样可以做一些预定的处理。这样一来，就有了“css预处器（css preprocessor）”。
什么是 css 预处理器
是 css 语言的超集，比css更丰满。
css 预处理器定义了一种新的语言，其基本思想是：用一种专门的编程语言，为css增加了一些编程的特性，将css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
通俗的说，css预处理器用一种专门的编程语言，进行web页面样式设计，然后再编译成正常的css文件，以供项目使用。css预处理器为css增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在css中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的css更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
css预处理器技术已经非常成熟，而且也涌现出了很多种不同的css预处理器语言，比如说：sass（scss）、less、stylus、turbine、swithch css、css cacheer、dt css等。如此之多的css预处理器，那么“我应该选择哪种css预处理器？”也相应成了最近网上的一大热门话题，在linkedin、twitter、css-trick、知呼以及各大技术论坛上，很多人为此争论不休。相比过计我们对是否应该使用css预处理器的话题而言，这已经是很大的进步了。
到目前为止，在众多优秀的css预处理器语言中就属sass、less和stylus最优秀，讨论的也多，对比的也多。本文将分别从他们产生的背景、安装、使用语法、异同等几个对比之处向你介绍这三款css预处理器语言。相信前端开发工程师会做出自己的选择——我要选择哪款css预处理器。
less 的介绍，less 是一款比较流行的预处理 css，支持变量、混合、函数、嵌套、循环等特点。
less 的语法
注释
less 的注释可以有两种。
第一种注释：模板注释
// 模板注释 这里的注释转换成css后将会删除
因为 less 要转换为 css才能在浏览器中使用。转换成 css 之后，这种注释会被删除（毕竟 css 不识别这种注释）。
第二种注释：css 注释语法
/* css 注释语法 转换为css后让然保留 */
总结：如果在less中写注释，我们推荐写第一种注释。除非是类似于版权等内容，就采用第二种注释。
定义变量
我们可以把重复使用或经常修改的值定义为变量，在需要使用的地方引用这个变量即可。这样可以避免很多重复的工作量。
（1）在less文件中，定义一个变量的格式：
@变量名: 变量值;        //格式@bgcolor: #f5f5f5;      //格式举例
（2）同时，在 less 文件中引用这个变量。
最终，less文件的完整版代码如下：
main.less： // 定义变量@bgcolor: #f5f5f5;// 引用变量body{ background-color: @bgcolor;}
我们将上面的less文件编译为 css 文件后（下一段讲less文件的编译），自动生成的代码如下：
main.css： body{ background-color: #f5f5f5;}
使用嵌套
在 css 中经常会用到子代选择器，效果可能是这样的：
.container { width: 1024px;}.container > .row { height: 100%;}.container > .row a { color: #f40;}.container > .row a:hover { color: #f50;}
上面的代码嵌套了很多层，写起来很繁琐。可如果用 less 的嵌套语法来写这段代码，就比较简洁。
嵌套的举例如下：
main.less: .container { width: @containerwidth; > .row { height: 100%; a { color: #f40; &:hover { color: #f50; } } } div { width: 100px; .hello { background-color: #00f; } }}
将上面的less文件编译为 css 文件后，自动生成的代码如下：
main.css .container { width: 1024px;}.container > .row { height: 100%;}.container > .row a { color: #f40;}.container > .row a:hover { color: #f50;}.container div { width: 100px;}.container div .hello { background-color: #00f;}
相信看了这些案例你已经掌握了方法，更多精彩请关注其它相关文章！
相关阅读：
javascript里最常用的20条正则表达式
vscode的常用设置
10进制数如何转为16进制
js如何实现自定义鼠标右击菜单
以上就是css预处理器之less详解的详细内容。