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;
}
}
}
•運(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安裝及基本用法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
HTML+CSS+JS實現(xiàn)的簡單應(yīng)用小案例分享
這篇文章主要為大家分享四個用HTML+CSS+JS實現(xiàn)的簡單應(yīng)用小案例，有：猜數(shù)字、表白墻、切換日夜間模式和待辦事項，需要的可以參考一下2022-02-02
這篇文章主要為大家詳細(xì)介紹了Javascript實現(xiàn)秒表倒計時功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要為大家詳細(xì)介紹了bootstrap suggest js下拉框的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
JS實現(xiàn)"上次操作未完成禁止新操作"邏輯特事特辦方案
這篇文章主要介紹了詳解JS如何實現(xiàn)"上次操作未完成禁止新操作"的邏輯及思路,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
Javascript頁面跳轉(zhuǎn)常見實現(xiàn)方式匯總
這篇文章主要介紹了Javascript頁面跳轉(zhuǎn)常見實現(xiàn)方式,結(jié)合實例匯總分析了JavaScript常用的七種頁面跳轉(zhuǎn)實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-11-11
基于原生CSS+JS實現(xiàn)一個標(biāo)簽輸入框
在各種框架大行其道的氛圍下，有些原生的屬性和方法可能都不太關(guān)注了，這也不失為是一種損失。本文就將利用原生CSS+JS實現(xiàn)一個簡單的標(biāo)簽輸入框，感興趣的可以了解一下2022-04-04
有關(guān)suggest快速刪除后仍然出現(xiàn)下拉列表的bug問題
寫suggest的時候，有時我們快速刪除輸入框的文字后，但是suggest下拉列表還有出現(xiàn)，導(dǎo)致的原因是因為ajax異步請求造成的，下面通過本文給大家分享下解決方法，感興趣的朋友一起看看2016-12-12
這篇文章主要介紹了JavaScript常用工具函數(shù),匯總整理了各種JavaScript常用工具函數(shù),包括獲取、判斷、轉(zhuǎn)換、設(shè)置等相關(guān)功能函數(shù)的定義與使用方法,需要的朋友可以參考下2020-05-05
Bootstrap下拉菜單Dropdowns的實現(xiàn)代碼
這篇文章主要為大家詳細(xì)介紹了Bootstrap下拉菜單Dropdowns的實現(xiàn)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了js/jq仿window文件夾框選操作插件,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03