Shulou(Shulou.com)06/01 Report--

本篇内容主要讲解"CSS预处理器Less怎么用"，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习"CSS预处理器Less怎么用"吧!

CSS预处理器

为什么要有CSS预处理器

CSS基本上是设计师的工具，不是程序员的工具。在程序员的眼里，CSS是很头痛的事情，它并不像其它程序语言，比如说PHP、Javascript等等，有自己的变量、常量、条件语句以及一些编程语法，只是一行行单纯的属性描述，写起来相当的费事，而且代码难以组织和维护。

很自然的，有人就开始在想，能不能给CSS像其他程序语言一样，加入一些编程元素，让CSS能像其他程序语言一样可以做一些预定的处理。这样一来，就有了"CSS预处器（CSSPreprocessor）"。

什么是CSS预处理器

是CSS语言的超集，比CSS更丰满。

CSS预处理器定义了一种新的语言，其基本思想是：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

CSS预处理器技术已经非常成熟，而且也涌现出了很多种不同的CSS预处理器语言，比如说：Sass（SCSS）、LESS、Stylus、Turbine、SwithchCSS、CSSCacheer、DTCSS等。如此之多的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>.rowa{

color:#f40;}.container>.rowa: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>.rowa{color:#f40;}.container>.rowa:hover{color:#f50;}.containerdiv{width:100px;}.containerdiv.hello{background-color:#00f;}

At this point, I believe that everyone has a deeper understanding of "CSS Preprocessor Less How to Use", so let's actually operate it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.