最全的less筆記，半小時學會！

一燈發表於2019-04-30

1. less 簡介

less是CSS的預編譯器，可以擴充套件CSS語言（當然也相容CSS），可以定義變數、混合、函式等等，讓CSS程式碼更易維護和擴充套件
less與傳統寫法相比：

less字尾為" .less "

less中的註釋有兩種

// 這種註釋不會編譯到CSS檔案
/* 這種註釋會編譯到CSS檔案*/
div {
  font-size: 14px;
}
複製程式碼

less需要編譯成css才能使用

使用編譯工具，比如 Koala 挺好用的（當然也有很多線上編譯工具）

在專案中使用（比如Vue，需要安裝less-loader）

客戶端除錯（存在跨域問題，不推薦這種方式）

使用link標籤引用less.min.js（官網下載），注意rel="stylesheet/less"

這種方式不生成css檔案，直接在瀏覽器檢視

2. 巢狀規則

2.1 less的巢狀規則類似HTML的結構，使得CSS程式碼清晰

/*css 寫法*/
div {
  font-size: 14px;
}
div p {
 margin: 0 auto;
}

div p a {
  color: red;
}

// less寫法
div {
  font-size: 14px;
  p {
    margin: 0 auto;
    a {
      color: red;
    }
  }
}
複製程式碼

2.2 父元素選擇符 &

表示當前選擇器的所有父選擇器

//css寫法
.bgcolor {
  background: #fff;
}
.bgcolor a {
  color: #888888;
}
.bgcolor a:hover {
  color: #ff6600;
}

//less寫法
.bgcolor {
  background: #fff; 
  a {
    color: #888888;      
    &:hover {
      color: #ff6600;
    }
  }
}
複製程式碼

2.3 改變選擇器的順序

將&放到當前選擇器之後，會將當前選擇器移到最前面
只需記住 “& 代表當前選擇器的所有父選擇器”

ul {
  li {
    .color &{
      background: #fff;
    }
  }
}

//編譯結果
.color ul li {
  background: #fff;
}
複製程式碼

2.4 組合使用

將生成所有可能的選擇器列表

.div1, .div2 {
  color: red;
  & & {
    border-top: 1px solid blue;
  }
} 

//編譯結果
.div1, .div2 {
  color: red;
}
.div1 .div2,
.div2 .div1,
.div1 .div1,
.div2 .div2 {
  border-top: 1px solid blue;
}
複製程式碼

3. 變數

3.1 變數的定義和使用

定義：@name: value; （@black: #000;）
使用場合分3種：

常規使用：@name

作為選擇器或屬性名：@{name}

作為URL："@{name}"

/* 1.常規使用 */
@black: #000000;

div {
  color: @black
}

//編譯結果
div {
  color: #000000;
}

/* 2.作用選擇器和屬性名 */
@selName: container;
@proName: width;

.@{selName} {
  @{proName}: 100px;
}

//編譯結果
.container {
  width: 100px;
}

/* 3.作為URL */
@imgUrl: "./images/logo.png"

div {
  background: #FFF url("@{imgUrl}")
}

//編譯結果
div {
  background: #FFF url("./images/logo.png")
}
複製程式碼

3.2 注意事項

變數是延遲載入的，可以不預先宣告

div {
  color: @black
}

@black: #000000;

//編譯結果
div {
  color: #000000;
}
複製程式碼

變數的作用域

less會從當前作用域沒找到，將往上查詢（類似js）

如果在某級作用域找到多個相同名稱的變數，使用最後定義的那個（類似css）

@var: 0;
.class {
    @var: 1;
    .brass {
        @var: 2;
        three: @var;
        @var: 3;
    }
    one: @var; //類似js，無法訪問.brass內部
}

//編譯結果
.class {
    one: 1;
}
.class .brass {
    three: 3;  //使用最後定義的 @var: 3
}
複製程式碼

4. 混合（mixins）

混合：一種將一系列屬性從一個規則集引入（“混入”）到另一個規則集的方式
混合是非常重要的一個概念，內容也偏多，可以嘗試多看幾遍！

4.1 普通混合

//混合
.border {
  border-top: solid 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #eee;
  .border;
}

//編譯結果
.border {
  border-top: solid 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #eee;
  border-top: solid 1px black;
  border-bottom: solid 2px black;
}
複製程式碼

4.2 不帶引數的混合

從上面的程式碼發現，混合也被編譯輸出了
在混合名字後加上括號，編譯後不再輸出

//加括號但不帶引數的混合
.border() {
  border-top: solid 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #eee;
  .border;  //加不加括號都可以
}

//編譯結果
#menu a {
  color: #eee;
  border-top: solid 1px black;
  border-bottom: solid 2px black;
}
複製程式碼

4.3 帶引數的混合

//帶引數的混合
.border(@color) {
  border-top: solid 1px @color;
  border-bottom: solid 2px @color;
}
#menu a {
  color: #eee;
  .border(#fff);
}

//編譯結果
#menu a {
  color: #eee;
  border-top: solid 1px #ffffff;
  border-bottom: solid 2px #ffffff;
}
複製程式碼

4.4 帶引數且有預設值的混合

//帶引數且有預設值的混合
.border(@color: #fff) {
  border-top: solid 1px @color;
  border-bottom: solid 2px @color;
}
#menu a {
  color: #eee;
  .border;
}

#menu p {
  .border(#000);
}

//編譯結果
#menu a {
  color: #eee;
  border-top: solid 1px #ffffff;
  border-bottom: solid 2px #ffffff;
}

#menu p {
  border-top: solid 1px #000000;
  border-bottom: solid 2px #000000;
}
複製程式碼

4.5 帶多個引數

多個引數時，引數之間可以用分號或逗號分隔
注意逗號分隔的是“各個引數”還是“某個列表型別的引數”

兩個引數，並且每個引數都是逗號分隔的列表：.name(1,2,3; something, ele)

三個引數，並且每個引數都包含一個數字：.name(1,2,3)

使用分號，呼叫包含一個逗號分割的css列表（一個引數）： .name(1,2,3; )

逗號分割預設值（兩個引數）：.name(@param1:red, blue)

//less編寫
.mixin(@color, @padding: xxx, @margin: 2) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}

.div {
  .mixin(1,2,3; something, ele);  //2個引數
}
.div1 {
  .mixin(1,2,3);                  //3個引數
}
.div2 {
  .mixin(1,2,3; );                //1個引數
}

//編譯輸出
.div {
  color-3: 1, 2, 3;
  padding-3: something, ele;
  margin: 2 2 2 2;
}
.div1 {
  color-3: 1;
  padding-3: 2;
  margin: 3 3 3 3;
}
.div2 {
  color-3: 1, 2, 3;
  padding-3: xxx;
  margin: 2 2 2 2;
}
複製程式碼

4.6 定義多個相同名稱的混合

less會根據引數進行呼叫相應的混合

.mixin(@color) {
  color-1: @color;
}
.mixin(@color; @padding: 2) {
  color-2: @color;
  padding-2: @padding;
}
.mixin(@color; @padding: 3; @margin) {
  color-3: @color;
  padding-3: @padding;
  margin: @margin @margin @margin @margin;
}

.some .selector div {
  .mixin(#008000); //第二個mixins也被呼叫了，因為 @padding 有預設值
}

.some .selector p {
  .mixin(#008000, 5); //只有第二個mixins被呼叫
}

//編譯結果
.some .selector div {
  color-1: #008000;
  color-2: #008000;
  padding-2: 2;
}
.some .selector p {
  color-2: #008000;
  padding-2: 5;
}

複製程式碼

4.7 命名引數

引用mixin時可以通過引數名稱而不是引數的位置來為mixin提供引數值，任何引數都通過名稱來引用，這樣就不必按照特定的順序來使用引數

.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin:20; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}

//編譯輸出
.class1 {
  color: #33acfe;
  margin: 20px;
  padding: 20px;
}
.class2 {
  color: #efca44;
  margin: 10px;
  padding: 40px;
}
複製程式碼

4.8 @arguments變數

@arguments表示所有可變引數
引數的先後順序就是括號內的順序，在賦值時，值的位置和個數也是一一對應的
只有一個值，把值賦給第一個，兩個值，賦給第一個和第二個......
若想賦給第一個和第三個，必須把第二個引數的預設值寫上

.border(@x: solid, @c: red) {
  border: 21px @arguments;
}
.div1 {
  .border;
}
.div2 {
  .border(solid, black)
}

//編譯輸出
.div1 {
  border: 21px solid #ff0000;
}
.div2 {
  border: 21px solid #000000;
}
複製程式碼

4.9 匹配模式

自定義一個字元，使用時加上那個字元，就呼叫相應的規則

.border(all, @w: 5px) {
  border-radius: @w;
}
.border(t_l, @w: 5px) {
  border-top-left-radius: @w;
}
.border(b_l, @w: 5px) {
  border-bottom-left-radius: @w;
}
.border(b_r, @w: 5px) {
  border-bottom-right-radius: @w;
}

.border {
  .border(all, 50%);
}
//編譯結果
.border {
  border-radius: 50%;
}
複製程式碼

4.10 得到混合中變數的返回值

.average(@x, @y) {
  @average((@x + @y)/2);
}

div {
  .average(16px, 50px);
  padding: @average;
}

//編譯結果
div {
  padding: 33px;
}
/*
1、將16px 和 50px 賦值給混合 .average進行計算
2、計算結果賦值給變數 @average
3、然後在div中呼叫@average的值
4、編譯後就得到了average的值33px
*/
複製程式碼

5. 運算

任何數值、顏色值和變數都可以進行運算

5.1 數值類運算

less會自動推算數值的單位，不必每個值都加上單位
運算子之間必須以空格分開，存在優先順序問題時注意使用括號

.wp {
  width: (450px - 50)*2;
}

//編譯輸出
.wp {
  width: 900px;
}
複製程式碼

5.2 顏色值運算

先將顏色值轉換為rgb模式，運算完後再轉換為16進位制的顏色值並返回
注意：取值為0-255，所以計算時不能超過這個區間，超過預設使用0或255
注意：不能使用顏色名直接運算

.content {
  color: #000000 + 8;
}

//rgb(0,0,0) + 8
//rgb(8,8,8)
//十六進位制：#080808

//編譯輸出
.content {
  color: #080808; 
}
複製程式碼

6. 名稱空間

有時混合中巢狀了比較多的規則，而我們只需要其中一部分，可使用名稱空間獲取

6.1 使用 ">" 符號

//混合集
#bgcolor() {
  background: #fff;
  .a() {
    color: #888;
    &:hover {
      color: #ff6600;
    }
    .b() {
      background: #ff0000;
    }    
  }
}

.bgcolor1 {
  background: #fdfee0;
  #bgcolor>.a;     //只使用.a()
}
.bgcolor2 {
  #bgcolor>.a>.b;  //只使用.b()
}

//編譯輸出
.bgcolor1 {
  background: #fdfee0;
  color: #888;
}
.bgcolor1:hover {
  color: #ff6600;
}
.bgcolor2 {
  background: #ff0000;
}
複製程式碼

6.2 省略 ">"，換成空格

//混合集
#bgcolor() {
  background: #fff;
  .a() {
    color: #888;
    &:hover {
      color: #ff6600;
    }
    .b() {
      background: #ff0000;
    }    
  }
}

.bgcolor1 {
  background: #fdfee0;
  #bgcolor .a;     //只使用.a()
}
.bgcolor2 {
  #bgcolor .a .b;  //只使用.b()
}

//編譯輸出
.bgcolor1 {
  background: #fdfee0;
  color: #888;
}
.bgcolor1:hover {
  color: #ff6600;
}
.bgcolor2 {
  background: #ff0000;
}
複製程式碼

7. 引入

引入一個或多個檔案，這些檔案定義的規則可在當前less檔案中使用
使用@import

7.1 引入less檔案

//main.less
@wp: 960px;
.color {
  color: #fff;
}

//當前less檔案
@import "main"; //可以不加字尾
.content {
  width: @wp;
}

//編譯輸出
.color {
  color: #fff
}
.content {
  width: 960px;
}
複製程式碼

7.2 引入css檔案

注意：不能混合css的規則到專案中，編譯後原樣輸出“@import xxx.css”
並且引入時不能省略字尾名

//main.css
.color {
  color: #ff6600;
}

@import "main.css" ;
.content {
  width: @wp;
  height: @wp;
}

//編譯輸出
@import "main.css";  //原樣輸出,但有效，css有這條語句
.content {
  width: 960px;
  height: 960px;
}
複製程式碼

7.3 帶引數的引入

once：預設，只引入一次
reference：使用less檔案但不輸出，注意對比上面的例子（不使用會輸出沒有加括號的混合）

@wp: 960px;
.color {
  color: #fff;
}

//當前less檔案
@import (reference) "main";
.content {
  width: @wp;
}

//編譯輸出
.content {
  width: 960px;
}
複製程式碼

inline：在輸出中包含less檔案但是不能操作

@wp: 960px;
.color {
  color: #fff;
}

//當前less檔案
@import (inline) "main"; 
.content {
  width: @wp;
}

//編譯輸出
@wp: 960px;    //報錯，@wp未知
.color {
  color: #fff;
}

複製程式碼

less：將檔案作為less檔案物件，無論什麼副檔名

//main.css檔案
.color {
  color: #ff6600;
}

//當前less
@import (less) "main.css";
  .content {
.color;
}

//編譯輸出
.color {
  color: #ff6600;
}
.content {
  color: #ff6600;
}
複製程式碼

css：將檔案作為css檔案物件，無論什麼副檔名

//當前less檔案
@import (css) "main.less";
.content {
  color: red;
}

//編譯輸出
@import "main.less";
.content {
  color: red;
}
複製程式碼

multiple：允許引入多次相同檔名的檔案

//當前less
@import (multiple) "main.less";
@import (multiple) "main.less";
@import (multiple) "main.less";
.content {
  width: @wp;
}

//編譯輸出
.color {
  color: #fff;
}
.color {
  color: #fff;
}
.color {
  color: #fff;
}
.content {
  width: 960px;
}
複製程式碼

8. !important

提升權重優先順序為最高（儘量避免使用）
在呼叫的混合集後面追加 !important 關鍵字，混合集中所有屬性都繼承 !important

.foo(@bg: #fdfdfd, @color: #900) {
  background: @bg;
  color: @color;
}

.important {
  .foo() !important
}

//編譯輸出
.important {
  background: #fdfdfd !important;
  color: #990000 !important;
}
複製程式碼

9. 條件表示式

9.1 帶條件的混合

比較運算子：>, >=, =, =<, <
格式：when() { }

// lightness() 是檢測亮度的函式，用%度量
.mixin(@a) when(lightness(@a) >= 50% ) {
  background-color: black;
}
.mixin(@a) when(lightness(@a) < 50% ) {
  background-color: white;
}

.mixin(@a) {
  color: @a;
}
.class1 {
  .mixin(#ddd);
}
.class2 {
  .mixin(#555);
}

//編譯輸出
.class1 {
  background-color: black;
  color: #dddddd;
}
.class2 {
  background-color: white;
  color: #555555;
}
複製程式碼

9.2 型別檢測函式

檢測值的型別

iscolor

isnumber

isstring

iskeyword

isurl

.mixin(@a: #fff; @b: 0) when(isnumber(@b)) {
  color: @a;
  font-size: @b;
}
.mixin(@a; @b: black) when(iscolor(@b)) {
  font-size: @a;
  color: @b;
}
複製程式碼

9.3 單位檢測函式

檢測一個值除了數字是否是一個特定的單位

ispixel

ispercentage

isem

isunit

.mixin(@a) when(ispixel(@a)) {
  width: @a;
}
.mixin(@a) when(ispercentage(@a)) {
  width: @a;
}

.class1 {
  .mixin(960px);
}
.class2 {
  .mixin(95%);
}

//編譯輸出
.class1 {
  width: 960px;
}
.class2 {
  width: 95%;
}
複製程式碼

10. 迴圈

混合可以呼叫自身，當一個混合遞迴呼叫自身就構成迴圈結構

.loop(@counter) when(@counter > 0) {
  .h@{counter} {
    padding: (10px*@counter);
  }
  .loop((@counter - 1)); //遞迴呼叫自身
}
div{
  .loop(5);
}

//編譯輸出
div .h5 {
  padding: 50px;
}
div .h4 {
  padding: 40px;
}
div .h3 {
  padding: 30px;
}
div .h2 {
  padding: 20px;
}
div .h1 {
  padding: 10px;
}
複製程式碼

11. 合併屬性

將多條規則合併為一條

11.1 方式一

在需要合併的屬性的冒號之前加上 “+”，合併後用逗號分隔

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin;
  box-shadow+: 0 0 20px black;
}

//編譯輸出
.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black; //逗號分隔兩個屬性值
複製程式碼

11.2 方式二

在需要合併的屬性的冒號之前加上 “+_”，合併用空格分隔

.mixin() {
  background+_: #f66;
  background+_: url("/sss.jpg") 
}

.class {
  .mixin;
}

//編譯輸出
.class {
  background: #f66 url("/sss.jpg"); //空格分隔
} 
複製程式碼

11.3 兩種方式結合

.mixin() {
  background+_: #f66;
  background+: url("/sss.jpg");
  background+_: no-repeat;
  background+: center;
}
.class {
  .mixin;
}

//編譯輸出
.class {
  background: #f66, url("/sss.jpg")  no-repeat, center;
}
複製程式碼

12. 函式庫

less中封裝了非常多函式庫，例如顏色定義、顏色操作、顏色混合、字串處理等等
例如color()：用於解析顏色，將代表顏色的字串轉換為顏色值

body {
  color: color("#f60");
  background: color("red");
}

//編譯輸出
body {
  color: #ff6600;
  background: #ff0000;
}
複製程式碼

例如convert()：將數字從一種型別（單位）轉換為另一種型別

長度單位：m, cm, mm, in, pt, px, pc

時間單位：s, ms

角度單位：rad(弧度), deg(度), grad(梯度), tum(圓)

body {
  width: convert(20cm, px);
}

//編譯輸出
body {
  width: 755.90551181px;
}
複製程式碼

更多函式前往官網檢視！

感謝你的閱讀和點贊！

sqli-less 筆記
2018-08-03
SQL筆記
史上最全、最詳細的 kafka 學習筆記！
2018-11-27
Kafka筆記
最全面的 Spring 學習筆記
2017-03-28
Spring筆記
學會做筆記
2012-08-01
筆記
1.Less學習筆記第一篇
2016-02-26
筆記
《會計學》學習筆記
2009-04-30
筆記
提升小波的學習筆記
2007-07-01
筆記
RabbitMq 最全的效能調優筆記
2019-01-19
MQ筆記
[轉] 一個小時學會Git
2017-09-11
Git
【筆記】時間管理《小強升職記》
2016-12-02
筆記
微信小程式學習筆記
2021-08-22
微信小程式筆記
react小書學習筆記
2018-08-06
React筆記
Activiti 學習筆記小結
2016-09-16
筆記
會計學課程筆記
2020-10-22
筆記
學習sed & awk時做的筆記
2004-09-10
筆記
2小時上手Spring Boot 筆記
2019-03-02
Spring Boot筆記
1小時學會Git玩轉GitHub
2021-12-07
Github
1 小時學會 MySQL 資料庫
2017-03-13
MySql資料庫
一小時學會 C# 6.0
2015-12-31
C#
小魚JCL學習筆記（一）
2007-08-01
筆記
史上最全的SQL Server複習筆記一
2015-09-08
SQLServer筆記
半小時擼一個抽獎程式
2019-02-03
半小時讓你成為EXCEL高手
2011-10-30
Excel
小程式學習筆記（6）-菜譜小程式的製作
2020-12-01
筆記
一小時學會 C# 6 的新特性
2015-12-30
C#
PHP程式設計師7小時學會Kotlin第二小時
2016-05-31
PHP程式設計師Kotlin
例項教程:1小時學會Python
2013-11-15
Python
小程式學習筆記(未完待續）
2021-01-01
筆記
微信小程式入門學習筆記
2018-05-11
微信小程式筆記
MySQL增強（Loss-less）半同步複製
2018-08-16
MySql
Django學習筆記—Comments庫的使用方法小記
2012-05-06
Django筆記
java大資料最全課程學習筆記(5)--MapReduce精通(一)
2020-07-19
Java大資料筆記
linux學習筆記之小談時鐘時間，使用者CPU時間，系統CPU時間 .
2016-07-10
Linux筆記
win10如何設定每隔半小時提醒_win10怎麼設定半小時提醒一次
2020-08-29
Win10
跟著 AI 一個小時學會 Python
2024-10-21
AIPython
自己動手2小時學會配置遊戲輔助
2024-05-21
遊戲
再過半小時，你就能明白kafka的工作原理了
2019-06-05
Kafka
numpy的學習筆記\pandas學習筆記
2018-03-18
筆記

最全的less筆記，半小時學會！

1. less 簡介

2. 巢狀規則

2.1 less的巢狀規則類似HTML的結構，使得CSS程式碼清晰

2.2 父元素選擇符 &

2.3 改變選擇器的順序

2.4 組合使用

3. 變數

3.1 變數的定義和使用

3.2 注意事項

4. 混合（mixins）

4.1 普通混合

4.2 不帶引數的混合

4.3 帶引數的混合

4.4 帶引數且有預設值的混合

4.5 帶多個引數

4.6 定義多個相同名稱的混合

4.7 命名引數

4.8 @arguments變數

4.9 匹配模式

4.10 得到混合中變數的返回值

5. 運算

5.1 數值類運算

5.2 顏色值運算

6. 名稱空間

6.1 使用 ">" 符號

6.2 省略 ">"，換成空格

7. 引入

7.1 引入less檔案

7.2 引入css檔案

7.3 帶引數的引入

8. !important

9. 條件表示式

9.1 帶條件的混合

9.2 型別檢測函式

9.3 單位檢測函式

10. 迴圈

11. 合併屬性

11.1 方式一

11.2 方式二

11.3 兩種方式結合

12. 函式庫

相關文章