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