Less安装与使用步骤详解(WebStorm安装与使用)
這次給大家?guī)鞮ess安裝與使用步驟詳解，Less安裝與使用的注意事項(xiàng)有哪些，下面就是實(shí)戰(zhàn)案例，一起來看一下。
node.js 的安裝
官網(wǎng)：http://nodejs.cn/
在命令行檢驗(yàn)是否安裝成功
切換到項(xiàng)目目錄，初始化了一個(gè)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>
<p id="box">
<ul>
<li>你好</li>
<li>hello</li>
</ul>
</p>
</body>
</html>
登錄后復(fù)制
style.less
#box{
width:200px;
height:200px;
background-color:blue;
ul{
color:white;
li{
line-height:50px;
}
}
}
登錄后復(fù)制
在命令行中輸入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;
}
登錄后復(fù)制
混合
.bt{
width:200px;
height:200px;
border-top:2px solid red;
background-color:red;
}
#big{
.bt;
#small{
.bt;
}
}
登錄后復(fù)制
?嵌套
#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;
}
}
}
登錄后復(fù)制
?運(yùn)算
@color:#333;
#box{
width:100%;
height:60px;
background-color:@color+#111;
}
?calc()
@var:50vh/2;
#box{
width:calc(50% + (@var - 20px));
}
登錄后復(fù)制
?固定函數(shù)
@base:#f04615;
@width:0.5;
#box{
width:percentage(@width);
color:saturate(@base,5%);
background-color:spin(lighten(@base,25%),8);
}
登錄后復(fù)制
?注釋
//單行注釋// /*多行 注釋*/ ?引入其他less文件 @import "other.less";
登錄后復(fù)制
相信看了本文案例你已經(jīng)掌握了方法，更多精彩請(qǐng)關(guān)注風(fēng)君子博客其它相關(guān)文章！
推薦閱讀：
JS中常出現(xiàn)哪些BUG和錯(cuò)誤
vue個(gè)人信息查看與密碼修改如何實(shí)現(xiàn)
以上就是Less安裝與使用步驟詳解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注風(fēng)君子博客其它相關(guān)文章！
總結(jié)
以上是生活随笔為你收集整理的Less安装与使用步骤详解(WebStorm安装与使用)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： l2的最优回归_大白话5分钟带你走进人工
- 下一篇： dateformat 返回类型_Spri