首页 / 知识
CSS预处理器之Less详解
2023-04-11 15:10:00
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;}
本文转载自中文网 |
最新内容
相关内容
python 培训之 object是什么类型
python 培训之 object是什么类型，培训，类型，实例，顶端，对象，关系，链条，父子，数据类型，属性，在Python的世界中，object是父子关系的顶端，所有的数
python版本2和3之间的区别是什么？
python版本2和3之间的区别是什么？，培训，区别，之间，版本，
pythonHTTP与HTTPS之间的区别
pythonHTTP与HTTPS之间的区别，培训，区别，之间，
python列表和元祖之间的区别
python列表和元祖之间的区别，数据，培训，设计，名字，类型，区别，同构，列表，不同点，操作，python列表和元组的区别如下相同点：都是序列类型回答它们
python求和函数sum()详解
python求和函数sum()详解，培训，函数，结果，字典，详解，对象，总和，恍然大悟，语法，个数，今天在学习的过程中，误用sum()函数，我又去查了查pythonsum(
python详解Python垃圾回收机制
python详解Python垃圾回收机制，技术，时间，培训，对象，系统，名字，垃圾，标记，机制，内存，引用计数python默认的垃圾收集机制是“引用计数”，每个对
python详解python包管理器pip安装
python详解python包管理器pip安装，培训，管理，工具，方法，详解，源码，可能会，脚本，模块，以上，pip对于使用python的朋友并不陌生，当你想安装python
python详解python中单引号，双引号，多
python详解python中单引号，双引号，多引号区别，培训，字符串，表示，区别，引号，注释，详解，下面，原因，字符，先说1双引号与3个双引号的区别，python双引
python新手必看之文本文件的输入输
python新手必看之文本文件的输入输出，培训，标准，数据，文件，对象，输入输出，新手，模式，功能，内容，Python具有基本的文本文件读写功能。Python的
如何在HTML select元素的选项文本
如何在HTML select元素的选项文本之前放置空格字符？，如何在HTML select元素的选项文本之前放置空格字符？，选项,我在,列表中,空格，How d
关于shell：是否有Unix实用程序在std
关于shell：是否有Unix实用程序在stdin之前添加时间戳？，关于shell：是否有Unix实用程序在stdin之前添加时间戳？，实用程序,脚本,输入,文本，I
更改Ctrl + Tab行为以在Visual Stu
更改Ctrl + Tab行为以在Visual Studio中的文档之间移动，更改Ctrl + Tab行为以在Visual Studio中的文档之间移动，更改,方式,工作,Tab