CSS预处置器之Less详解

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详解的具体内容，更多请关注百分百源码网其它相关文章！