发表于： 2020-03-24 09:28:45
1 1197
1.什么是less
2.如何配置less
3.less中的变量
4.less的混合
5.less中的扩展
6.编码实战
7.常见问题
8.参考文献
9.更多讨论
（1）背景介绍
什么是less？
css是一门非程序式语言，没有变量，没有函数，SCOPE（作用域），需要书写大量看似没有逻辑的代码，即不方便维护与扩展，也不利于复用。 为了方便前端开发的工作量，出现了sass和less.
less是一门动态的css语言，使得css样式更加灵活地作用于html标签。
less作为css的一种形式扩展，它并没有减少css的功能，而是在现有的css语法上，为css加入了程序是式语言的特性。less包含一套自定义的语法及一个解析器， 用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的css文件。
如何配置LESS
第一步：安装node 一般电脑的路径一般电脑已安装： C:\Users\24950\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Node.js
第二步：.node命令行加载less
1:node-v(检测node是否安装)
2:npm-v(npm 是否安装) 安装之后记住less的路径
打开webstorm的file watchers, file->settings->Tools->file watchers 在弹窗的窗口的右上角点击绿色的 ‘+’ 号,然后选择less，按照下图进行配置:
(2)知识剖析
LESS中的变量
在less中用@里定义变量
变量允许我们单独定义一系列样式，然后去调用，所以做全局样式调整的时候我们可能只需要修改几行代码就可以实现了。
LESS中的混合
混合（mixins）混合可以将一个定义好的CLASS-A轻松的引导另一个CLASS-B钟，从而简单实现CLASS-B继承CLASS-A中所有的属性。 我们还可以带参数地调用，就像使用函数一样。
如果你想创建一个mixin，但是你不想让mixin在生成的css中输出，你可以在后面加上口号（）
在mixin后使用！important关键字，将会标记调用所有继承的属性为important
LESS中的扩展
扩展选择器是less的伪类选择器，他会复制当前选择器，定义新的样式，而原来的不便
使用Extend的时候，不能extend含有变量的选择器名称，不然无效
(3)常见问题
less的混合与继承之间的区别？
(4)解决方案
Less的混合是定义一个选择器A，在选择器B中引入，并且less中可以携带变量。去传递参数
less中的extend是一个伪类选择器，你定义来一个less里面的代码属性，通过extend来继承使用，extend无法携带参数。
mixins混合，可以传参数，也可以做函数来使用。
(5)编码实战
(6)扩展思考
SASS和LESS的不同
less是一种动态样式语言. 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。
Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。
sass是一种动态样式语言，Sass语法属于缩排语法，
比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。
（7参考文献）
https://www.cnblogs.com/fighxp/p/8080796.html
沉着前进（博客园）
（8更多讨论）
为什么要用less，而不是选择css。
因为css不好用，一个页面，要写一大堆，选择器，而且不想在html页面，你至少能看出来子父级关系。在css里面
动辄几百行的代码，完全就不知道该怎么去改。比起less来说，维护性太差了。
css没有变量，修改全局样式中的背景图片，你要去做n步，less中只需要更改变量中的参数......
less与sass之间的区别。
编译环境不一样，less是电脑上配置 node.js来编译的，而sass是通过服务端，所以sass会更快一些。
less与sass的定义变量的符号完全不同,less @ sass$
sass有占位符，less没有，less与sass的作用域不同。
less与sass比起来有什么特征？
less是基于JavaScript的，是超集的CSS。
less是一个敏捷工具，可以排除代码冗余的问题。
返回列表
评论