Less 安裝及基本用法
更新時間：2018年05月05日 20:54:24 作者：littleWriter
這篇文章主要介紹了Less 安裝及基本用法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
node.js是一個前端的框架 自帶一個包管理工具npm
node.js 的安裝
官網(wǎng)：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 的基本用法
變量
@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));
}
•固定函數(shù)
@base:#f04615;
@width:0.5;
#box{
width:percentage(@width);
color:saturate(@base,5%);
background-color:spin(lighten(@base,25%),8);
}
•注釋
//單行注釋// /*多行 注釋*/ •引入其他less文件 @import "other.less";
總結(jié)
以上所述是小編給大家介紹的Less安裝及基本用法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
in運算符是javascript語言中比較特殊的一個，可以單獨使用作為判斷運算符，也常被用于for...in循環(huán)中遍歷對象屬性2011-09-09
本文主要介紹了typescript 類型any不能分配給類型never，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
下面小編就為大家?guī)硪黄猨avascript url幾種編碼方式詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
在Openlayers中,長度和面積的測量均依賴ol/sphere模塊,長度通過getLength方法計算,面積則通過getArea方法,面積測量不是計算平面面積,而是基于球面,適用于多邊形和多多邊形集合,感興趣的朋友一起看看吧2024-11-11
這篇文章主要介紹了Knockoutjs 學習系列(二)花式捆綁 的相關資料,主要介紹了knockoutjs中各種綁定的使用方法，非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06
這篇文章主要介紹了JS如何判斷對象是否包含某個屬性,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-08-08
大家好,本篇文章主要的講的是html+css+js實現(xiàn)別踩白板小游戲，感興趣的同學趕快來看一看吧，覺得不錯的話可以收藏一下哦，方便下次瀏覽2021-11-11
下面小編就為大家?guī)硪黄猨s獲取css的各種樣式并且設置他們的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
我們在使用JS渲染DOM時，一般使用字符串創(chuàng)建DOM然后附加到父元素上，如果附加的DOM是動態(tài)易變的，那需要在函數(shù)中寫大量邏輯。如果在控件實現(xiàn)過程中，這帶來的問題更為嚴重。2013-04-04
關于window.pageYOffset和document.documentElement.scrollTop
window.pageYOffset：Netscape屬性，指的是滾動條頂部到網(wǎng)頁頂部的距離2011-04-04