Less 安装及基本用法

前端之家收集整理的这篇文章主要介绍了Less 安装及基本用法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

node.js 的安装

官网:http://nodejs.cn/

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

@H_403_30@

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

安装与卸载jQuery包(例子)  安装

  卸载

<p style="text-align: center">

安装淘宝镜像

2. 安装less

试一试:

test.html

<Meta charset="UTF-8"> Title
Box">
  • 你好
  • hello

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/

变量

混合

•嵌套

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; } } }

•运算

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

•固定函数

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

•注释

文件 @import "other.less";

总结

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

原文链接:https://www.f2er.com/js/32491.html

猜你在找的JavaScript相关文章