微信公众平台小程序_Less 装置及根本用法

2021-01-08 15:09

Less 安装及基本用法       这篇文章主要介绍了Less 安装及基本用法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

node.js 的安装

官网:

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

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

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

卸载

安装淘宝镜像

2. 安装less

试一试:

<

 !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" 
 li 你好 /li 
 li hello /li 
 /ul 
 /div 
 /body 
 /html 

style.less

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

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

如下:

< 看一下效果吧3. less 的基本用法

变量

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

混合

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

嵌套

#box{
 width:100%;
 height:60px;
 background-color:#ccc;
 width:100%;
 height:20px;
 background-color:yellow;
 list-style:none; 
 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安装及基本用法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!




扫描二维码分享到微信

在线咨询
联系电话

020-66889888