less使用總結

原連接：https://www.cnblogs.com/xinjie-just/p/6715189.html

 

15年自學了 less ，但是一直沒用，就忘記了。後來抱着提升 css 開發速度的目的，又去學習了 less ，學完立刻用，效果立竿見影，記得也牢了。剛開始學習前，咱們總會問本身一個問題，學習它有什麼用。就拿這個 less 來講，學習它有什麼用，分明就有了 css 用來編寫樣式，我還要花時間來研究 less ，並且學完了還不必定能用上，忘得也快，這不是浪費我時間嗎。其實，存在即有用，至於對你的用處有多大，須要本身使用事後方纔知道。

好了，說說我本身在使用 less 過程當中的心得。

1、要使用 less 須要一個 less 編譯的工具：

1. koala 的下載與安裝:

下載建議到官網去下載 http://koala-app.com/index-zh.html ，下載後一個壓縮包，解壓後雙擊可執行文件便可使用了。不須要安裝。

2. koala 的介紹：

打開 koala 軟件，如上圖，點擊"+"能夠選擇文件夾，選擇的文件夾裏須要預先準備一個 less 文件，且僅僅只須要準備 less 文件，當添加了這個文件夾後，koala 會根據 less 文件的名稱在同一目錄下自動添加一個 css 文件。

能夠選擇語言：

點擊工具圖標，能夠選擇語言，這裏以簡體中文爲例。

2、less 的使用準備

在 html 中引入的依然是 css 文件，只不過咱們一旦選用 less 編寫樣式了，之後維護就是維護 less 文件。

3、編寫 less

1. 註釋：

less 的註釋有兩種方法，"/**/" 和 "//"，前一種會在 css 文件中顯示，後一種不會在 css 顯示。

從兩幅圖的對比能夠看出，less 中 "/**/" 方式添加的註釋在 css 中也顯示了，而 "//" 方式添加的註釋在css 中沒有顯示

2. 變量

上圖中定義了三個變量， text-color, main-color, fs

上圖中使用了其中一個變量 text-color，

定義變量的方法："@"加上變量名。

定義變量的好處：當須要更改樣式中多處的值時，只須要更改變量的值，提升效率。

3. 運算

如上圖，有加法和除法運算，經過前面定義變量 fs ，這裏使用它並在其基礎上加上 4，因此它的 font-size 值就變成了 20px(16px + 4)。

使用運算的好處：避免人工重複計算！

好比：想要讓單行文本豎直居中顯示，須要設置高和行高相同。可是若是設置了 box-sizing: border-box; border-bottom-width: 1px; 的話，就須要讓行高的值比高的值小 1px。這種狀況下，就能夠設置變量再結合運算讓複雜的工做變得簡單。

@height: 30px; height: @height; line-height: @height - 1;

若是想要更改高度的值，只須要更改變量 height 的值就好了。而不須要更改 height 和 line-height 兩個屬性的值，提升效率。

4. 繼承

在上面的諸多例子中，都有"&"符號，這個符號起到繼承的做用。這個符號就是它的父級標籤(類，id等等)用幾個例子說明：

.industry-section {
    width: 950px;
    margin-right: auto;
    margin-left: auto;
    & > div:not(.heading) {
        padding: 40px 150px;
        & h3 {
            font-size: @fs + 12;
            margin-bottom: .5rem;
        }
        & li {
            font-size: @fs + 2;
            line-height: 1.6;
        }
    }    
}

　　至關於：

.industry-section {
  width: 950px;
  margin-right: auto;
  margin-left: auto;
}
.industry-section > div:not(.heading) {
  padding: 40px 150px;
}
.industry-section > div:not(.heading) h3 {
  font-size: 28px;
  margin-bottom: .5rem;
}
.industry-section > div:not(.heading) li {
  font-size: 18px;
  line-height: 1.6;
}

　　再例如：

& > a {
    & > span {
        display: block;
        &:first-of-type {
            font-size: 18px;
        }
        &:last-of-type {
            font-size: 12px;
            text-transform: capitalize;
        }
    }
}

　　至關於：

a > span {
    display: block;
}
a > span:first-of-type {
    font-size: 18px;
}
a > span:last-of-type {
    font-size: 12px;
    text-transform: capitalize;
}

　　

5. 混合

混合能夠將一個定義好的class A輕鬆的引入到另外一個class B中，從而簡單實現class B繼承class A中的全部屬性。咱們還能夠帶參數地調用，就像使用函數同樣。

例如：

class A

.page-width { width: 100%; max-width: 1920px; margin-right: auto; margin-left: auto;
}

class B

body {
    .page-width;
    font-size: @fs;
    color: @text-color;
    background-color: #fff;
    font-family: "Microsoft Yahei", Arial, sans-serif;
}

　　編譯後的css:

body { width: 100%; max-width: 1920px; margin-right: auto; margin-left: auto; font-size: 16px; color: #333; background-color: #fff; font-family: "Microsoft Yahei", Arial, sans-serif;
}

6.  在 less 中依然可使用媒體查詢(工做中用到，更新於20170421)：

less 中使用媒體查詢

.application-section {
    max-width: 100%;
    width: 1920px;
    height: 770px;
    margin: 30px auto;
    background: url(../images/app-scene.png) center top no-repeat;
    position: relative;
    & h2 {
        position: absolute;
        top: 70px;
        left: 50%;        
        font-size: 0;
        width: 1200px;
        transform: translateX(-50%);
        @media (max-width: 1600px) {
            width: 1000px;
            & span {
                font-size: @fs + 20;
            }
        }
    }
}

　　編譯後 css

.application-section {
  max-width: 100%;
  width: 1920px;
  height: 770px;
  margin: 30px auto;
  background: url(../images/app-scene.png) center top no-repeat;
  position: relative;
}
.application-section h2 {
  position: absolute;
  top: 70px;
  left: 50%;
  font-size: 0;
  width: 1200px;
  transform: translateX(-50%);
}
@media (max-width: 1600px) {
  .application-section h2 {
    width: 1000px;
  }
  .application-section h2 span {
    font-size: 36px;
  }
}