LESS基礎教程

一、初見LESS

1. 什么是LESS

Less是Css的預編譯語言，兼容Css語法，在其基礎上擴展，可以使用變量，混合，繼承，函數等語法，更貼近編程語言，在開發時使用，生產時將Less轉換為Css文件。

2. LESS的官方網站

中文網址：http://lesscss.cn/

3. LESS與CSS的寫法

CSS的寫法

.content{
    display: flex;
}
.content .item{
    width: 100rem;
    height: 100rem;
    background: pink;
    color: #fff;
}

LESS的寫法

.content{
    display: flex;
    .item{
        width: 100rem;
        height: 100rem;
        background: pink;
        color: #fff;
    }
}

4. 搭建開發環境

因為less其實無法在瀏覽器上運行的，它要編譯成CSS才行。主要以下方法

• 下載less.js文件，利用該文件編譯less，但是太建議使用
• 借助考拉這軟件編譯
• 借助vs code，在該編輯器安裝編譯less的插件，less文件保存后就會自動生成對應的CSS
• 借助node環境

因為前面兩種沒用過，所以主要介紹下后兩種

在vs code安裝less的編譯插件

安裝插件Easy LESS，如下圖所示

有了這個后，可以在編輯器新建less文件，后綴名是.less,保存后會自動編譯成css

使用node

要使用node就要先安裝node，這個就自己去官網下載吧，傻瓜式安裝，無需多言

node官網：https://nodejs.org/

如果不知道自己的電腦有沒有安裝node的話，打開終端，也就是window的cmd，至於蘋果電腦的，很抱歉，我不知道，本人用的是window。

查看node版本，最好是版本8以上的，本人是v12.13.0

node -v

有了node后，就有了npm這個包管理工具，現在的Node版本會自帶npm的

接下來就是安裝less了，我這里用全局安裝，這樣在哪里都可以用了

npm install less -g

查看版本

lessc -v

在自己電腦上新建一個文件夾，再新建一個less文件

代碼如下

@bg: #000;
.div{
	height: 2rem;
	width: 2rem;
	background: @bg
}

使用命令行

cd 你自己的less文件所在的地址

如cd C:\Users\asus\Desktop\less教程

命令行

lessc style.less

這個會在終端輸出編譯后的css代碼

命令行

lessc style.less style.css

會輸出編譯好的CSS文件

如果要卸載全局依賴

npm uninstall less -g

二、LESS語法

1. 注釋

less的注釋有兩種

//這種注釋，在編譯后不會出現在CSS文件上

/*這種注釋，編譯后會出現在CSS文件上*/

2. 變量

2.1 普通的變量

變量的定義

@變量名: 值;

例如

@bg: #000;
@length: 200rem;
div{
  width: @length;
  height: @length;
  background-color: @bg;
}

變量的值如果需要單位，要把單位一起寫上

如果重復定義變量，那么后面的變量會覆蓋前面的變量

@color: #333;
@color: #fff;
p{
  color: @color;
}

CSS

p {
  color: #fff;
}

2.2 變量的合法標識符

變量名是不能隨便定義的，有些特殊的字符的變量名會導致編譯報錯，像#, .等，經過試試，可以使用數字，英文大小寫，下划線，中划線，且開頭可以是數字，其他特殊符號就不要去整了，這些也夠用了，編程語言的標識符都沒這么多。

2.3 作為選擇器和屬性名

<div class="div">
    
</div>
<p id="p1">
    
</p>

@div: div;// 選擇器名
@width: width; // 屬性名
@p: p1;

//使用的時候要加上花括號{}
.@{div}{
  @{width}: 200rem;
  height: 200rem;
  background: #ffffff;
}

#@{p}{
    color: #fff;
}

2.4 作為URL

@imgUrl: "./img.png"; // 圖片地址
div{
    height: 2rem;
    width: 2rem;
    background: url("@{imgUrl}");
}

2.5 延遲加載

變量不一定要先聲明后使用，可以先使用再聲明，這樣也是不會報錯的，不過沒有特殊情況，不建議這樣寫，影響可讀性。

div{
  width: @length;
  height: @length;
  background-color: @bg;
}

@bg: #000;
@length: 200rem;

2.6 變量的作用域

存在多個相同變量時，會使用最后定義的變量，less會在當前作用域向上搜索。

花括號{}就是一個作用域

LESS

@color: #fff;
div{
  color: @color; // #888;

  @color: #777;
  border-color: @color; // #888;
  p{
    @color: #000;  // 如果這里沒有定義，就會去外部的作用域尋找該變量
    color: @color; // #000;
  }

  background: @color; // #888;  
  @color: #888;  // 最后定義的，所以會使用這個變量
}

CSS

div {
  color: #888;
  border-color: #888;
  background: #888;
}
div p {
  color: #000;
}

三、混合

混合就是將一系列屬性從一個規則集引入到另一個規則集中。

通俗來講就是將相同的CSS片段抽取到一個類中，其他類可以引用這個類。

3.1 普通混合

h1 {
  font-size: 36px;
  font-family: "楷體";
  border: 1px solid #ffffff;
  color: pink;
}
h2 {
  font-size: 32px;
  font-family: "楷體";
  border: 1px solid #ffffff;
  color: pink;
}

上面有相同片段的代碼，可以提取出來放在一個類里

.mixins{
    font-family: "楷體";
    border: 1px solid #ffffff;
    color: pink;
}

h1{
    font-size: 36px;
}
h2{
    font-size: 32px;
}

之后在需要這個類(混合)時，引入這個混合

.mixins{
    font-family: "楷體";
    border: 1px solid #ffffff;
    color: pink;
}

h1{
    font-size: 36px;
    .mixins;
}
h2{
    font-size: 32px;
    .mixins;
}

這樣編譯出來的CSS是這樣的

.mixins {
  font-family: "楷體";
  border: 1px solid #ffffff;
  color: pink;
}
h1 {
  font-size: 36px;
  font-family: "楷體";
  border: 1px solid #ffffff;
  color: pink;
}
h2 {
  font-size: 32px;
  font-family: "楷體";
  border: 1px solid #ffffff;
  color: pink;
}

這個類.mixins被輸出了，這樣就顯得有點多余了，所以接下來是，讓它不輸出的混合

3.2 不能輸出的混合

要讓混合不輸出，只要在后面加上括號()就行了

.mixins(){
  font-family: "楷體";
  border: 1px solid #ffffff;
  color: pink;
}

h1{
  font-size: 36px;
  .mixins();
}
h2{
  font-size: 32px;
  .mixins();
}

輸出CSS

h1 {
  font-size: 36px;
  font-family: "楷體";
  border: 1px solid #ffffff;
  color: pink;
}
h2 {
  font-size: 32px;
  font-family: "楷體";
  border: 1px solid #ffffff;
  color: pink;
}

3.3 &符號的運用

&這個符號代表着父級的意思

h1{
  font-size: 36px;
  
  &:hover{
    color: pink;
  }
}

這時&就代表着父級h1

編譯后的CSS

h1 {
  font-size: 36px;
}
h1:hover {
  color: pink;
}

混合中的&

.mixins(){
  &:hover{
    color: pink;
  }
}

h1{
  font-size: 36px;
  
  .mixins();
}
h2{
  font-size: 32px;
  .mixins();
}

這段代碼等價於

h1{
  font-size: 36px;
  
  &:hover{
    color: pink;
  }
}
h2{
  font-size: 32px;
  &:hover{
    color: pink;
  }
}

所以編譯后的CSS

h1 {
  font-size: 36px;
}
h1:hover {
  color: pink;
}
h2 {
  font-size: 32px;
}
h2:hover {
  color: pink;
}

3.4 帶參數的混合

.mixins(@color){
  &:hover{
    color: @color;
  }
}

h1{
  font-size: 36px;
  
  .mixins(red); //傳入顏色
}
h2{
  font-size: 32px;
  .mixins(pink); //傳入顏色
}

3.5 帶參數並且有默認值

.mixins(@color:pink){
  &:hover{
    color: @color;
  }
}

h1{
  font-size: 36px;
  
  .mixins(); // 不傳參數時，默認為上面設置的pink
}
h2{
  font-size: 32px;
  .mixins(green);
}

3.6 帶多個參數的混合

.mixins(@w, @h, @bgColor:#000){
  width: @w;
  height: @h;
  background: @bgColor;
}
.div1{
  .mixins(200px, 200px, pink); //參數要一一對應
}
.div2{
  .mixins(200px, 200px); // 最后一個參數因為有默認值，所以可以省略
}

如果沒有一一對應，雖然不會報錯，但是CSS會無效

.mixins(@w, @h, @bgColor:#000){
  width: @w;
  height: @h;
  background: @bgColor;
}
.div1{
  .mixins(200px, pink);// 這樣沒有一一對應，第二個參數的值不應該是顏色值
}

編譯出的CSS

.div1 {
  width: 200px;
  height: pink; /*這里很明顯不對*/
  background: #000;
}

那么問題來了，如果混合的參數排列是這樣的

.mixins(@w, @bgColor:#000, @h){
  width: @w;
  height: @h;
  background: @bgColor;
}

如果這樣的話，下面的寫法就是個錯誤的

.mixins(@w, @bgColor:#000, @h){
  width: @w;
  height: @h;
  background: @bgColor;
}
//下面的代碼會報錯
.div1{
  .mixins(200px, 200px); 
}

改成這樣

.mixins(@w, @bgColor:#000, @h){
  width: @w;
  height: @h;
  background: @bgColor;
}
//指定參數
.div1{
  .mixins(@w:200px, @h:200px); 
}

如下混合應該如何傳參

如果margin要有四個值時，要如何傳參

.mixins(@margin, @bgColor ){
  width: 200px;
  height: 200px;
  margin: @margin;
  background: @bgColor;
}

答案如下

.mixins(@margin, @bgColor ){
  width: 200px;
  height: 200px;
  margin: @margin;
  background: @bgColor;
}
//這里被分號分割了，這時可以看成兩個參數，而2px,3px,4px,5px這一串將會被作為第一個參數
.div{
  .mixins(2px,3px,4px,5px;pink);
}

編譯出的CSS

.div {
  width: 200px;
  height: 200px;
  margin: 2px, 3px, 4px, 5px;
  background: pink;
}

如果傳參時的括號里面只有逗號，那么會一次傳給各個參數

如果傳參時既有逗號和分號，那會把分號之前的看成一個整體

.mixins(2px,3px,4px,5px;)這樣是一個參數

3.7 定義多個相同名稱和相同參數個數的混合

先來看相同名字的混合，但參數個數不同

.mixins(@color){
  color: @color;
}
.mixins(@color, @w){
  color: @color;
  width: @w;
}

.div{
  .mixins(pink);
}
.div1{
  .mixins(pink, 20px);
}

編譯后的CSS

.div {
  color: pink;
}
.div1 {
  color: pink;
  width: 20px;
}

從上面看來，混合會自己匹配，只有一個參數的會去找一個參數混合，兩個就會去找有連個參數的混合

如果混合名相同，參數個數也相同呢？

.mixins(@color, @w){
  color: @color;
  width: @w;
}
.mixins(@bg, @h){
  background: @bg;
  height: @h
}

.div1{
  .mixins(pink, 20px);
}

編譯后的CSS

.div1 {
  color: pink;
  width: 20px;
  background: pink;
  height: 20px;
}

這樣就很明顯了，兩個混合都會被引用

再來看另一種情況

相同混合名且參數名也相同

.mixins(@color){
  color: @color;

}
.mixins(@color, @w:200px){
  background: @color;
  width: @w;

}

.div1{
  .mixins(pink);
}

編譯輸出

.div1 {
  color: pink;
  background: pink;
  width: 200px;
}

其實這種情況和第二種其實是一樣的，只不過因為有默認值，所以兩個混合都被引用了。

3.8 @arguments變量

這個可以@arguments可以代表全部參數

.mixins(@b, @c){
  border: 1px @arguments;

}

.div1{
  .mixins(solid, pink);
}

編譯后的CSS

.div1 {
  border: 1px solid pink;
}

3.9 匹配模式

自己定義一個字符串

比如

//t-l 這個是自定義的
.mixins(t-l,@w:5px){
  border-top-left-radius: @w;

}
.mixins(b-l,@w:5px){
  border-bottom-left-radius: @w;

}

.div1{
  .mixins(t-l); //這個將會匹配，這時會引用第一個
}

編譯后的CSS

.div1 {
  border-top-left-radius: 5px;
}

再舉個例子

.mixins(r){
  float: right;

}
.mixins(l){
  float: left;

}

.div1{
  .mixins(l);
}

編譯后的CSS

.div1 {
  float: left;
}

3.10 得到混合中變量的返回值

.add(@w, @h){
  width: @w;
  height: @h;
  @margin: @w + @h;
}

div{
  .add(100px, 200px);
  margin: @margin; // 拿到上面混合定義的變量值
}

也可以有多個返回值

.add(@w, @h){
  width: @w;
  height: @h;
  @margin: @w + @h;
  @padding: @w+ @h + 100px;
}

div{
  .add(100px, 200px);
  margin: @margin;
  padding: @padding;
}

四、嵌套規則

像HTML一樣的嵌套，讓層級顯得明顯

4.1 普通的嵌套

舉個栗子

HTML

<div class="div">
   	<div class="item">
        <p>
            
        </p>
    </div>
    <div class="content">
        
    </div>
</div>

LESS

.div{
    width: 200px;
    .item{
        height: 400px;
        p{
            line-height: 2rem;
        }
    }
    .content{
        background: "#000";
    }
}

編譯后的CSS

.div {
  width: 200px;
}
.div .item {
  height: 400px;
}
.div .item p {
  line-height: 2rem;
}
.div .content {
  background: "#000";
}

4.2 用&改變嵌套的順序

.a{
  .b{
      .c{
          color: red;
      }
  }
}

編譯后為

.a .b .c {
  color: red;
}

如果加上&

.a{
  .b{
      .c &{
          color: red;
      }
  }
}

編譯后為

.c .a .b {
  color: red;
}

4.3 所有組合

利用多個&符號

p, a, ul ,li{
 
  & &{
    color: #fff;
  }
}

編譯后

p p,
p a,
p ul,
p li,
a p,
a a,
a ul,
a li,
ul p,
ul a,
ul ul,
ul li,
li p,
li a,
li ul,
li li {
  color: #fff;
}

五、運算

less的運算主要是數值型運算，顏色值運算，單位至少要存在一個，運算符要與值分開，涉及優先級時以括號()進行優先級運算。

5.1 數值運算

舉個例子

div{
  width: 10px + 20;
  height: 10rem + 2;

}

.div{
  width: 10px + 5rem; // 有連個不同單位時會，使用第一個的單位  15px
  height: 10px + 2 * 4;
  line-height: (2px + 5px) * 4;
}

編譯后

div {
  width: 30px;
  height: 12rem;
}
.div {
  width: 15px;
  height: 18px;
  line-height: 28px;
}

5.2 顏色值運算

LESS在運算時，會先轉換為rgb模式，計算后再返回16進制的顏色值，因為rgb模式的值最大為255，所以超過這個值時，將默認使用最大數255。

div{
  color: #000000 + 2;
  background: red + green;
}

編譯后

div {
  color: #020202;
  background: #ff8000;
}

六、命名空間

將一些需要的混合組合在一起，可以通過多層id或class來實現

#div(){
  height: 4px;
  .a(){
    color: red;

    .b(){
      width: 4px;
    }
  }

}

#p(){
  height: 4px;
  .a(){
    color: green;
  }

  .b(){
    background: red;
  }
}

div{
  #div > .a //只引用 #div 中的a
  // #div()>.a 這會引起報錯
}

p{
  #p(); // 只引用id的樣式
}

ul{
  #p .a; //也可以省略 > 用空格代替
}

編譯后

div {
  color: red;
}
p {
  height: 4px;
}
ul {
  color: green;
}

七、@import和!important

7.1 引入

新建兩個less文件，一個main.less，另一個style.less

可以在less文件中，引入另一個less文件，這樣就可以使用其文件中的變量以及混合

main.less

@color: #000;

.add(){
  width: 4rem;
  height: 4rem;
}

style.less

@import './main.less'; // 引入

.a{
  .add();
  background: @color;

}

7.2 !important

在調用混合時使用該關鍵字，可以讓混合中的屬性都繼承該關鍵字

.min(){
  width: 2px;
  height: 2px;
}

.a{
  .min();
}

.b{
  .min() !important;
}

編譯后

.a {
  width: 2px;
  height: 2px;
}
.b {
  width: 2px !important;
  height: 2px !important;
}

八、條件表達式

類似編程語言的if，在less中用的是when

//lightness 計算亮度的函數
.mixin(@a) when(lightness(@a) >= 50%){
  background: black;
}
.mixin(@a) when(lightness(@a) < 50%){
  background: white;
}
.mixin(@a){
  color: @a;
}

//引用混合
.a{
    .mixin(#ddd); // 亮度大於 50% 所以 是 black
}
.b{
    .mixin(#333); // 亮度小於 50% 所以 是 white
}

編譯后

.a {
  background: black;
  color: #ddd;
}
.b {
  background: white;
  color: #333;
}

九、循環

在LESS中混合可以調用自身，

關鍵字loop和when

.loop(@count) when(@count > 0){
  .loop(@count - 1); // 調用自身
  width: 10px * @count;

}

div{

  .loop(5);
}

編譯后

div {
  width: 10px;
  width: 20px;
  width: 30px;
  width: 40px;
  width: 50px;
}

但是這樣的代碼沒什么意義，所以來看另一個例子

.loop(@count) when(@count > 0){
  // 當變量作為選擇器時，要加上花括號
  h@{count}{
    font-size: 10 * @count;
  }
  .loop(@count - 1); // 調用自身

}

.loop(6);

編譯后

h6 {
  font-size: 60;
}
h5 {
  font-size: 50;
}
h4 {
  font-size: 40;
}
h3 {
  font-size: 30;
}
h2 {
  font-size: 20;
}
h1 {
  font-size: 10;
}

十、繼承

一個類繼承另一個類的樣式，其實就是將兩個類組合在一起，用逗號隔開

.center{
  display: flex;
  justify-content: center;
  align-items: center;
}

.div:extend(.center){
  width: 400px;

}

.p:extend(.center){

}

編譯后

.center,
.div,
.p {
  display: flex;
  justify-content: center;
  align-items: center;
}
.div {
  width: 400px;
}