Less是Css預(yù)處理器之一，分別有Sass、Less、Stylus這三個(gè)。
? ? ? ?Lesshttps://lesscss.org/? ? ? ? Less是用JavaScript編寫的，事實(shí)上，Less是一個(gè)JavaScript庫(kù)，他通過(guò)混合、變量、嵌套和規(guī)則設(shè)置循環(huán)擴(kuò)展了原生普通Css的功能。Less的少數(shù)缺點(diǎn)之一是它不支持函數(shù)。
Less的語(yǔ)法與Scss十分相似，只是在聲明變量時(shí)，Less使用@而不是$sign。
????????Sasshttps://www.sass.hk/guide/????????Sass讓人們受益的一個(gè)重要特性就是它為
css引入了變量。你可以把反復(fù)使用的css屬性值 定義成變量，然后通過(guò)變量名來(lái)引用它們，而無(wú)需重復(fù)書寫這一屬性值。
? ? ? ? Stylushttps://www.stylus-lang.cn/? ? ? ? Stylus由Node.JS編寫，與JS堆棧完美匹配。Stylus神獸Sass的邏輯能力和Less的簡(jiǎn)單性的影響。與Sass或Less版本相比，Stylus的一個(gè)優(yōu)點(diǎn)就是它具有極其強(qiáng)大的內(nèi)置功能，并且能夠處理繁重的計(jì)算。
Less筆記：
JavaScript代碼：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-687153.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>學(xué)無(wú)止境,永遠(yuǎn)對(duì)學(xué)習(xí)保持一種敬畏的態(tài)度!</title>
<link rel="stylesheet" type="text/css" href="./css/01.css">
</head>
<body>
<div id="wrap">
<div class="inner"></div>
<div class="inner2"></div>
</div>
</body>
</html>Less樣式代碼：文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-687153.html
// less變量
@c-pink: pink;
@mgn: margin;
@wrap: #wrap;
// 混合
.juzhong(@width: 10px, @height: 10px, @color: skyblue){
width: @width;
height: @height;
background: @color;
// less中的嵌套規(guī)則
// 注意點(diǎn)：一定要加&，否則會(huì)編譯成父子關(guān)系，使用&:表示平級(jí)
&:hover{
background: @c-pink;
}
}
* {
padding: 0;
@{mgn}: 0;
}
/* 這是我想給用戶看的注釋 */
// 這是給程序員看的注釋
@{wrap} {
width: 500px;
height: 500px;
margin: auto;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid skyblue;
.inner {
.juzhong(100px , 100px, red);
}
.inner2 {
.juzhong(@color: gray);
}
}
// less中唯一有一點(diǎn)邏輯的地方：變量的延遲加載（看作用域）
@var: 0;
.wzh-1{
@var: 1;
.wzh-2 {
@var: 2;
three: @var; // 3
@var: 3;
}
one: @var; // 1
}
// less中的嵌套規(guī)則
// 注釋
// 變量 @開頭
// @c-pink: pink; color: @c-pink;
// @wrap: #wrap; @{wrap} {}
// @margin: margin; @{margin}: auto;
// 場(chǎng)景：同一個(gè)大盒子下兩個(gè)一模一樣的小盒子，小盒子代碼重復(fù)，如何復(fù)用？ 混合即可高效解決
// less普通混合 ： juzhong()
// 混合的樣式會(huì)在css文件內(nèi)顯示
// less不帶輸出混合： .juzhong()
// 混合的樣式只在less文件內(nèi)顯示（給混合名字后面加上小括號(hào)即可，調(diào)用時(shí)也要加小括號(hào)）
// 帶參數(shù)并且?guī)J(rèn)值的混合 .juzhong(x, y) 俗稱mixin
// 只需要在 .juzhong(@width, @height, @color)
// 1、調(diào)用時(shí)需要接收形參
// 2、并且需要默認(rèn)值
// 命名參數(shù)混合
// 1、調(diào)用 .juzhong()函數(shù)時(shí)，它需要傳三個(gè)參數(shù)，如果你只想要傳參一個(gè)參數(shù)的話，就需要給參數(shù)命名；
// 2、命名參數(shù)這樣使用: .juzhong(@color: black) 這樣既可，如果不給參數(shù)命名，它會(huì)將顏色的值賦值到width寬度上去；
// arguments變量 實(shí)參列表 具有l(wèi)ength屬性的對(duì)象叫做偽數(shù)組
// .juzhong(@w, @line, @color) { border: @arguments}
// less計(jì)算： 加減乘除 計(jì)算時(shí)只需要一方帶單位即可
.wzh-1{ width: (100 + 100px)}
// 避免編譯：像我們css中計(jì)算的一個(gè)方法calc，
// 因?yàn)樗菫g覽器自帶的方法，它是會(huì)被自動(dòng)識(shí)別并編譯的，
// 所以我們不需要再讓less去編譯它，我們就可以使用 ~'' 將calc計(jì)算包起來(lái)，就會(huì)避免less編譯這行計(jì)算樣式
.lv{
margin: 0;
padding: ~'calc(100 + 100px)';
}
到了這里，關(guān)于前端三大Css處理器之Less的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
