Less 安装及基本用法

时间：2021-05-26

node.js是一个前端的框架 自带一个包管理工具npm

node.js 的安装

官网：http://nodejs.cn/

在命令行检验是否安装成功

切换到项目目录，初始化了一个package.json文件

安装与卸载jQuery包（例子）　　安装

　　卸载

安装淘宝镜像

2. 安装less

试一试：

test.html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="style.css" rel="external nofollow" /></head><body><div id="box"> <ul> <li>你好</li> <li>hello</li> </ul></div></body></html>

style.less

#box{ width:200px; height:200px; background-color:blue; ul{ color:white; li{ line-height:50px; } }}

在命令行中输入lessc xxx.less xxx.css，

如下：

用浏览器打开test.html 看一下效果吧3. less 的基本用法

https://less.bootcss.com/

变量

@red:red;@w:200px;#big{ width:@w; height:@w; background-color:@red; #small{ width:@w; height:@w; background-color:@red; }}p{ color:@red;}

混合

.bt{ width:200px; height:200px; border-top:2px solid red; background-color:red;}#big{ .bt; #small{ .bt; }}

•嵌套

#box{ width:100%; height:60px; background-color:#ccc; h3{ width:100%; height:20px; background-color:yellow; } ul{ list-style:none; li{ height:40px; line-height:40px; float:left; padding:0 10px; } }}

•运算

@color:#333;#box{ width:100%; height:60px; background-color:@color+#111;}•calc()@var:50vh/2;#box{ width:calc(50% + (@var - 20px));}

•固定函数

@base:#f04615;@width:0.5;#box{ width:percentage(@width); color:saturate(@base,5%); background-color:spin(lighten(@base,25%),8);}

•注释

//单行注释//•引入其他less文件@import "other.less";

总结

以上所述是小编给大家介绍的Less安装及基本用法，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章