三十分鐘學(xué)會 Less

每一門技術(shù)的出現(xiàn)都是為了解決現(xiàn)存的問題，同樣的，Less 的出現(xiàn)是為了解決 CSS 中過于呆板的寫法。Less 官方文檔 中對 Less 的使用有詳細(xì)的介紹，總結(jié)一下為：Less = 變量 + 混合 + 函數(shù)。如果你對 js 和 css 有所了解，那么就可以很快的掌握并在你的項目中使用 Less。

一、Less 使用初體驗

1. 使用 Less 寫樣式

使用 Npm 全局安裝 Less

$ npm install less -g

創(chuàng)建一個空文件夾，這里命名為：learn-less

在根目錄下創(chuàng)建 index.html 文件，復(fù)制內(nèi)容如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初識 Less</title>
    <link href="./main.css" rel="stylesheet">
</head>
<body>
    <div class="container">1</div>
    <div class="container2">2</div>
    <div class="container3">3</div>
</body>
</html>

在根目錄下創(chuàng)建 main.less 文件，復(fù)制內(nèi)容如下：

// main.less
@width: 100%;
@height: 100px;
@color: red;

.container{
   width: @width;
   height: @height;
   background-color: @color;
   margin-bottom: 5px;
 }

.container2{
  width: @width;
  height: @height;
  background-color: @color;
  margin-bottom: 5px;
}

.container3{
  width: @width;
  height: @height;
  background-color: @color;
  margin-bottom: 5px;
}

現(xiàn)在打開瀏覽器看一下，會發(fā)現(xiàn)并沒有加載樣式。這是因為 index.html 中引入的樣式文件是 main.css 而不是 main.less。所以接下來，我們需要將 main.less 轉(zhuǎn)換為 main.css，不用擔(dān)心，這一步驟并不需要你手動操作，僅僅是運行一條命令就會自動完成轉(zhuǎn)換。

$ lessc main.less

操作完以上步驟就會發(fā)現(xiàn)在根目錄下生成了一個 main.css 文件，此時再打開瀏覽器看看，樣式已經(jīng)出現(xiàn)了。

main.css 轉(zhuǎn)義內(nèi)容為：

.container {
  width: 100%;
  height: 100px;
  background-color: red;
  margin-bottom: 5px;
}
.container2 {
  width: 100%;
  height: 100px;
  background-color: red;
  margin-bottom: 5px;
}
.container3 {
  width: 100%;
  height: 100px;
  background-color: red;
  margin-bottom: 5px;
}

如果你使用了 Webstorm 作為開發(fā)工具，那么連手動輸入命令行這一步都可以跳過，因為 Webstorm 會在你的 .less 文件被修改后自動生成對應(yīng)的 .css 文件，具體配置跳轉(zhuǎn)：Webstorm 配置 Less 自動轉(zhuǎn)譯成 css

2. 感受 Less 的便利

現(xiàn)在有一個新的需求，需要將三個 div 的背景顏色改成藍(lán)色（blue），如果是之前 css 的寫法需要依次找到 container、container2、container3，對應(yīng)修改里面的 background-color 屬性，但是使用 less 我們僅僅修改前面定義過的變量值即可。

// main.less
@width: 100%;
@height: 100px;
@color: blue;

...

使用 lessc main.less 進(jìn)行轉(zhuǎn)譯后打開瀏覽器可以看到三個 div 的背景顏色已經(jīng)被改變了。

二、變量

在前面介紹的案例中已經(jīng)使用了“變量”的概念，是不是感覺和 js 很像，事實上 less 就是用 js 的寫法來寫 css。

官網(wǎng)在介紹變量的時候會給出很多應(yīng)用場景，總結(jié)一下就是使用 @ 符號定義變量，使用 @ 符號獲取變量，僅僅將 @變量名 看成是一個字符串。

@classname: main;
@color: red;

.@classname{
    background-color: @color;
}

從上面例子中可以看到，變量不僅僅可以作為樣式屬性值：background-color: @color;，還可以作為類名：.@classname 表示的就是 .main。這也就是為什么說僅僅將 @變量名 看成是一個字符串。

三、混合

先看一個 example.css 文件：

#menu a {
    color: #111;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu span {
    height: 16px;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu p {
    color: red;
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

可以看到上面三個樣式中都有 border-top 和 border-bottom 兩個屬性，并且內(nèi)容完全相同；在傳統(tǒng) CSS 寫法中只能這樣一遍有一遍的去書寫重復(fù)的內(nèi)容，在 Less 中通過將公共屬性抽取出來作為一個公共類的方式規(guī)避這一點。

// example2.less
.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

#menu a {
    color: #111;
    .bordered;
}

#menu span {
    height: 16px;
    .bordered;
}

#menu p {
    color: red;
    .bordered();
}

將以上 example2.less 進(jìn)行轉(zhuǎn)譯成 example2.css 文件為：

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu span {
  height: 16px;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
#menu p {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

可以看到 examle2.css 與 example.css 很相似，只是多了一個 .bordered 樣式。

修改 example2.less，將 .bordered 寫成 .bordered()，此時在進(jìn)行轉(zhuǎn)譯之后會看到 example2.css 和 example.css 文件就完全一樣了，使用 less 書寫更加簡單。

// example2.less
.bordered() {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}

...

總結(jié)：

  • 混合也是減少代碼書寫量的一個方法；

  • 混合的類名在定義的時候加上小括弧 ()，那么在轉(zhuǎn)譯成 css 文件時就不會出現(xiàn)；

  • 混合的類名在被調(diào)用的時候加上小括弧 ()和不加上小括弧 ()是一樣的效果，看個人習(xí)慣，如：第三行和第八行轉(zhuǎn)譯成 css 是一樣的。

    1 #menu span {
2     height: 16px;
3     .bordered;
4 }
5 
6 #menu p {
7     color: red;
8     .bordered();
9 }

四、函數(shù)

曾幾何時，在書寫呆板的 css 時有沒有想過讓類名動態(tài)化，根據(jù)不同的參數(shù)生成不同的樣式?？聪旅娴氖纠?/p> 

// func.less
.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);
}

使用 $ lessc func.less 進(jìn)行轉(zhuǎn)譯 func.css 文件內(nèi)容如下：

#header {
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}
.button {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

可以看到，這里就用到了函數(shù)的概念，在 #header 和 .button 中分別傳入不同的參數(shù)，結(jié)果也就生成不同的代碼。

關(guān)于 less 中函數(shù)的寫法還有以下幾種：

// 函數(shù)的參數(shù)設(shè)置默認(rèn)值：
.border-radius(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  border-radius: @radius;
}

// 函數(shù)有多個參數(shù)時用分號隔開
.mixin(@color; @padding:2) {
  color-2: @color;
  padding-2: @padding;
}

// 函數(shù)如果沒有參數(shù)，在轉(zhuǎn)譯成 css 時就不會被打印出來，詳見上面混合中的示例
.wrap() {
  text-wrap: wrap;
}

// 函數(shù)參數(shù)如果有默認(rèn)，調(diào)用時就是通過變量名稱，而不是位置
.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}

// 函數(shù)參數(shù)有個內(nèi)置變量 @arguments，相當(dāng)于 js 中的 arguments
.box-shadow(@x: 0; @y: 0; @blur: 1px; @color: #000) {
  -webkit-box-shadow: @arguments;
     -moz-box-shadow: @arguments;
          box-shadow: @arguments;
}

// 函數(shù)名允許相同，但參數(shù)不同，類似于 java 中多態(tài)的概念
.mixin(@color: black) {      
.mixin(@color: black; @margin: 10px) {

當(dāng)然，上面是開發(fā)人員自定義的函數(shù)，Less 也為我們定義了很多好用的內(nèi)置函數(shù)。關(guān)于內(nèi)置函數(shù)，如果掌握，可以在開發(fā)過程中節(jié)約很多時間，由于內(nèi)置函數(shù)數(shù)量很多，這里就不一一介紹，傳送門：Less 內(nèi)置函數(shù)官方文檔。

五、父子元素的寫法

在 css 中父子元素的寫法通常如下：

.container {
    padding: 0;
}
.container .article {
    background-color: red;
}

在 Less 寫法如下，父子嵌套關(guān)系一目了然。

.container {
    padding: 0;
    .article {
        background-color: red;
    }
}

當(dāng)然，父子元素還要一種是偽類的寫法，在 css 中寫法如下：

#header :after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}

在 less 中寫法如下，可以看到引入了新的符號 &，以 & 來代替主類 #header。

#header {
  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

六、神奇 @import

在傳統(tǒng) css 文件中，每個文件都是獨立的。在 less 中可以像 js 的模塊那樣在一個 less 文件中引入另一個 less 文件。

創(chuàng)建 one.less 文件：

.container {
  width: 100px;
  height: 200px;
}

創(chuàng)建 two.less 文件：

@import "one";

使用 $ lessc two.less 轉(zhuǎn)譯成 two.css 文件，可以看到內(nèi)容如下：

.container {
  width: 100px;
  height: 200px;
}

@import 的作用可以看成是將 one.less 的內(nèi)容復(fù)制一份到當(dāng)前 .less 文件中。

那么如果 two.less 中也有一個類名叫 container 的，使用 @import 之后會變成什么樣子呢？這個留給自行測試好啦。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容