Less安装与使用步骤详解(WebStorm安装与使用)
生活随笔
收集整理的這篇文章主要介紹了
Less安装与使用步骤详解(WebStorm安装与使用)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這次給大家帶來Less安裝與使用步驟詳解，Less安裝與使用的注意事項有哪些，下面就是實戰案例，一起來看一下。
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>
<p id="box">
<ul>
<li>你好</li>
<li>hello</li>
</ul>
</p>
</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";
登錄后復制
相信看了本文案例你已經掌握了方法，更多精彩請關注風君子博客其它相關文章！
推薦閱讀：
JS中常出現哪些BUG和錯誤
vue個人信息查看與密碼修改如何實現
以上就是Less安裝與使用步驟詳解的詳細內容，更多請關注風君子博客其它相關文章！
總結
以上是生活随笔為你收集整理的Less安装与使用步骤详解(WebStorm安装与使用)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： l2的最优回归_大白话5分钟带你走进人工
- 下一篇： sql是什么型数据库管理系统(商品管理系