less基礎 詳解
一,使用方式
1,html 中引用 (vscode中) 下載下面的外掛
建立一個 .less 檔案 儲存之後 會自動在同目錄生成一個.css檔案 只要在html 中用link 標籤引入即可
2,vue 中使用 就是在建立的時候勾選就行 然後 在頁面中 的style標籤中 lang='less' 就能用到less了
二 ,less 語法
1,變數 (用法一目瞭然)
1 @width: 100px; 2 @height: @width + 100px; 3 4 #header { 5 width: @width; 6 height: @height; 7}
編譯之後的css
#header {
width: 10px;
height: 20px;
}
2,混合 將一組屬性從一個規則中 混入另一個規則中去 假設我們定義了一個類(class)如下(也可以使用其它型別的選擇器如#id):
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; }
如果我們希望在其它規則集中使用這些屬性呢?沒問題,我們只需像下面這樣輸入所需屬性的類(class)名稱即可,如下所示:
#menu a { color: #111; .bordered(); } .post a { color: red; .bordered(); }
這樣既能將 上面的規則 加入到下面的規則裡去
3,巢狀
#header { color: black; .navigation { font-size: 12px; } .logo { width: 300px; } }
編譯後的css
#header { color: black; } #header .navigation { font-size: 12px; } #header .logo { width: 300px; }
還可以使用此方法將偽選擇器(pseudo-selectors)與混合(mixins)一同使用。下面是一個經典的 clearfix 技巧,重寫為一個混合(mixin) (&
.clearfix { display: block; zoom: 1; &:after { content: " "; display: block; font-size: 0; height: 0; clear: both; visibility: hidden; } }
3,@規則巢狀和冒泡
@ 規則(例如 @media
或 @supports
)可以與選擇器以相同的方式進行巢狀。@ 規則會被放在前面,同一規則集中的其它元素的相對順序保持不變。這叫做冒泡(bubbling)。
.component { width: 300px; @media (min-width: 768px) { width: 600px; @media (min-resolution: 192dpi) { background-image: url(/img/retina2x.png); } } @media (min-width: 1280px) { width: 800px; } }
編譯後的css
.component { width: 300px; } @media (min-width: 768px) { .component { width: 600px; } } @media (min-width: 768px) and (min-resolution: 192dpi) { .component { background-image: url(/img/retina2x.png); } } @media (min-width: 1280px) { .component { width: 800px; } }
4,運算(operations)
算術運算子 +
、-
、*
、/
可以對任何數字、顏色或變數進行運算。如果可能的話,算術運算子在加、減或比較之前會進行單位換算。計算的結果以最左側運算元的單位型別為準。如果單位換算無效或失去意義,則忽略單位。無效的單位換算例如:px 到 cm 或 rad 到 % 的轉換
// 所有運算元被轉換成相同的單位
@conversion-1: 5cm + 10mm; // 結果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 結果是 -1.5cm
// conversion is impossible
@incompatible-units: 2 + 5px - 3cm; // 結果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 結果是 10%
@other: @base + @filler; // 結果是 15%
乘法和除法不作轉換。因為這兩種運算在大多數情況下都沒有意義,一個長度乘以一個長度就得到一個區域,而 CSS 是不支援指定區域的。Less 將按數字的原樣進行操作,並將為計算結果指定明確的單位型別。
@base: 2cm * 3mm; // 結果是 6cm
你還可以對顏色進行算術運算:
@color: #224488 / 2; //結果是 #112244
background-color: #112244 + #111; // 結果是 #223355
5,calc()
為了與 CSS 保持相容,calc()
並不對數學表示式進行計算,但是在巢狀函式中會計算變數和數學公式的值。
@var: 50vh/2;
width: calc(50% + (@var - 20px)); // 結果是 calc(50% + (25vh - 20px))
6,轉義(escaping)
轉義(Escaping)允許你使用任意字串作為屬性或變數值。任何 ~"anything"
或 ~'anything'
形式的內容都將按原樣輸出,除非 interpolation。
@min768: ~"(min-width: 768px)"; .element { @media @min768 { font-size: 1.2rem; } }
編譯為:
@media (min-width: 768px) { .element { font-size: 1.2rem; } }
注意,從 Less 3.5 開始,可以簡寫為
@min768: (min-width: 768px); .element { @media @min768 { font-size: 1.2rem; } }
7,函式(function)
(內容較多,以後將會介紹到)
8,名稱空間和訪問符
有時,出於組織結構或僅僅是為了提供一些封裝的目的,你希望對混合(mixins)進行分組。你可以用 Less 更直觀地實現這一需求。假設你希望將一些混合(mixins)和變數置於 #bundle
之下,為了以後方便重用或分發
#bundle() { .button { display: block; border: 1px solid black; background-color: grey; &:hover { background-color: white; } } .tab { ... } .citation { ... } }
現在,如果我們希望把 .button
類混合到 #header a
中,我們可以這樣做:
#header a { color: orange; #bundle.button(); // 還可以書寫為 #bundle > .button 形式 }
9,對映
可以將混合(mixins)和規則集(rulesets)作為一組值的對映(map)使用。
#colors() { primary: blue; secondary: green; } .button { color: #colors[primary]; border: 1px solid #colors[secondary]; }
輸出符合預期:
.button { color: blue; border: 1px solid green; }
10,作用域
Less 中的作用域與 CSS 中的作用域非常類似。首先在本地查詢變數和混合(mixins),如果找不到,則從“父”級作用域繼承。
@var: red; #page { @var: white; #header { color: @var; // white } }
與 CSS 自定義屬性一樣,混合(mixin)和變數的定義不必在引用之前事先定義。因此,下面的 Less 程式碼示例和上面的程式碼示例是相同的:
@var: red; #page { #header { color: @var; // white } @var: white; }
11,註釋
塊註釋和行註釋都可以使用:
/* 一個塊註釋 * style comment! */ @var: red; // 這一行被註釋掉了! @var: white;
12,匯入
“匯入”的工作方式和你預期的一樣。你可以匯入一個 .less
檔案,此檔案中的所有變數就可以全部使用了。如果匯入的檔案是 .less
副檔名,則可以將副檔名省略掉:
@import "library"; // library.less
@import "typo.css";
轉載自:https://less.bootcss.com/#%E6%A6%82%E8%A7%88