Less（学习笔记）

Myth丶恋晨 2021-12-15 12:25 230阅读 0赞

**Less网站**

[http://www.bootcss.com/p/lesscss/][http_www.bootcss.com_p_lesscss]

[http://lesscss.org/][http_lesscss.org]

[http://lesscss.cn/][http_lesscss.cn]

**Less的安装**

参见：[http://lesscss.cn/\#using-less][http_lesscss.cn_using-less]

在服务器端安装 LESS 的最简单方式就是通过[npm][](node 的包管理器), 像这样：

npm install less

如果你想下载最新稳定版本的 LESS，可以尝试命令：

npm install less@latest

**在命令行使用**

lessc style.less

lessc style.less > ok.css

**简介**

Less：一门预处理语言，一种动态样式语言，它扩充了CSS，增加了变量、函数等功能，让CSS更易于维护，方便制作主题扩充。Less文件是一个可重用的样式编译文件，由于引入了函数和变量，可以方便地修改重复的地方，改了之后到Bootstrap或其他第三方的网站上去编译，它会根据你的变成代码自动生成你想要的CSS文件，可以减少开发时间和节约开发成本。

*  **变量**

变量允许我们单独定义一些列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了。

![1092303-20190208132439279-1979659711.png][]

*  **混合**

混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中所有属性。我们还可以带参数地调用，就像使用函数一样。

![1092303-20190208132554766-1679963804.png][]

*  **嵌套规则**

我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

![1092303-20190208132635646-97501900.png][]

*  **函数&运算**

运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。

LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。

![1092303-20190208132833235-1735115674.png][]

*  **监视模式**

监视模式是客户端的一个功能，这个功能允许你当你改变样式的时候，客户端将自动刷新。要使用它，只要在URL后面加上'\#!watch'，然后刷新页面就可以了。另外，你也可以通过在终端运行less.watch()来启动监视模式。

使用Less自带的监听模式实时的预览刷新浏览器，开启方式是在

的后面加入

转载于:https://www.cnblogs.com/liangchen2250/p/10356109.html

[http_www.bootcss.com_p_lesscss]: http://www.bootcss.com/p/lesscss/
[http_lesscss.org]: http://lesscss.org/
[http_lesscss.cn]: http://lesscss.cn/
[http_lesscss.cn_using-less]: http://lesscss.cn/#using-less
[npm]: http://github.com/isaacs/npm
[1092303-20190208132439279-1979659711.png]: /images/20211214/6fdc91745820495b9c6caa70b2c7a0aa.png
[1092303-20190208132554766-1679963804.png]: /images/20211214/da9d4c7206fc4751a74f9ab37fb02867.png
[1092303-20190208132635646-97501900.png]: /images/20211214/0c1788c149744e0e983ab21e6c562146.png
[1092303-20190208132833235-1735115674.png]: /images/20211214/b4fd6b07d6174a85963fe2bddfb06902.png