十分鐘學會less

css3

瀏覽數:215

2017-8-10

我們都知道在大型的項目中，當css有數千行代碼的時候，css的編寫有一些麻煩。我們經常會出現復制相同的代碼到不同的地方或者通過我們的編輯器來替換所有相同的顏色。這需要我們費很大的力氣去保持css的可維護性。但是其實我們并不是一定要這樣。

幸運的是，web開發社區已經解決了這個問題。我們現在有了類似Less, Sass和Stylus等的CSS預處理器。這些工具相比于原始的css給了我們以下的優點：

• 變量，我們可以定義變量來很方便的在你的css中改變值
• 動態的變量計算。(在css中我們可以使用calc，但是這個只可以用于長度的單位計算)
• Mixins, 可以幫助我們復用和組合css代碼，甚至還支持傳參。
• Functions, 提供了一系列使用的工具，用于控制顏色，將圖片轉為data-uris等.

一個不好的方面是，一旦你你使用了這些預處理器中的任何一個，你就必須要編譯你的樣式表為普通的css文件你才可以讓它在瀏覽器中正常的工作。

Getting Started

Less是由JavaScript編寫的，所以需要Node.js或者web瀏覽器來運行。你可以在你的web站點中加入less.js，它會在實時編譯所有的
.less
文件，但是速度比較慢同時也不推薦這么使用。比較好的辦法是把編譯你的less為css，然后在線上部署普通的css文件。有很多的免費的圖形化軟件可以編譯.less文件，不過在這里我們會使用node.js。

如果你已經安裝了node，而且你也知道terminal是什么，那就打開一個而且你也知道terminal是什么，然后使用NPM安裝less：

npm install -g less

安裝完畢后你可以在任何一個terminal中使用
lessc
命令，你可以通過類似下面這個命令來編譯你的.less文件來輸出一個CSS文件

lessc styles.less > styles.css

我們下面所有的樣式都是基于less的，可以將代碼轉換為類似
styles.css
的普通的CSS代碼。然后在html中加入css文件。如果你的編譯出現了錯誤，錯誤的相關信息會展示在你的terminal上面。

Variables（變量）

Less中很重要的一個特性就是可以像普通的編程語言一樣創建變量。變量可以存儲任何你經常使用的變量：類似顏色，尺寸，選擇器，字體名字，url等等。less的核心就是盡可能的復用你的css代碼。

這里，我們定義了兩個變量，一個用于背景顏色，另一個用于文字顏色，它們都包含了16進制的代碼。你可以切換兩個變量來編譯出不同版本的代碼：

@background-color: #ffffff; @text-color: #1A237E; p{ ??background-color: @background-color; ??color: @text-color; ??padding: 15px; } ul{ ??background-color: @background-color; } li{ ??color: @text-color; }

p{ ??background-color: #ffffff; ??color: #1A237E; ??padding: 15px; } ul{ ??background-color: #ffffff; } li{ ??color: #1A237E; }

在上面的例子中，背景顏色是白色，文字是深色的，如果我們想要深色的背景和白色的文字，我們只需要改變變量的值，所有用到這些變量的地方都會被替換。

在 http://lesscss.org/features/#variables-feature 你可以獲取關于less中變量的更多信息

Mixins

LESS可以幫你把一個已經存在的class或者id下面所有的樣式應用在其他的選擇器里面。下面這個例子可以更好的說明：

#circle{ ??background-color: #4CAF50; ??border-radius: 100%; } #small-circle{ ??width: 50px; ??height: 50px; ??#circle } #big-circle{ ??width: 100px; ??height: 100px; ??#circle }

#circle { ??background-color: #4CAF50; ??border-radius: 100%; } #small-circle { ??width: 50px; ??height: 50px; ??background-color: #4CAF50; ??border-radius: 100%; } #big-circle { ??width: 100px; ??height: 100px; ??background-color: #4CAF50; ??border-radius: 100%; }

你過你不想把你用于mixin輸出在最終的css文件里，你可以加上一個圓括號：

#circle(){ ??background-color: #4CAF50; ??border-radius: 100%; } #small-circle{ ??width: 50px; ??height: 50px; ??#circle } #big-circle{ ??width: 100px; ??height: 100px; ??#circle }

#small-circle { ??width: 50px; ??height: 50px; ??background-color: #4CAF50; ??border-radius: 100%; } #big-circle { ??width: 100px; ??height: 100px; ??background-color: #4CAF50; ??border-radius: 100%; }

mixins還有一個很酷的特性就是可以接收參數。在下面的例子中，我們在circles添加了一個參數用于width和height，同時設置默認值為25px。下面會生成一個寬高為25的#small-circle和一個寬高為100的#big-circle。

#circle(@size: 25px){ ??background-color: #4CAF50; ??border-radius: 100%; ??width: @size; ??height: @size; } #small-circle{ ??#circle } #big-circle{ ??#circle(100px) }

#small-circle { ??background-color: #4CAF50; ??border-radius: 100%; ??width: 25px; ??height: 25px; } #big-circle { ??background-color: #4CAF50; ??border-radius: 100%; ??width: 100px; ??height: 100px; }

閱讀官方文檔(http://lesscss.org/features/#mixins-feature)了解Less mixins的更多信息

Nesting and Scope(嵌套和作用域)

嵌套可以幫助你將html的頁面結構和樣式表的結構相同，同時也可以減少沖突。下面是一個無序列表(ul)和其子元素的例子:

ul{ ??background-color: #03A9F4; ??padding: 10px; ??list-style: none; ??li{ ????background-color: #fff; ????border-radius: 3px; ????margin: 10px 0; ??} }

ul { ??background-color: #03A9F4; ??padding: 10px; ??list-style: none; } ul li { ??background-color: #fff; ??border-radius: 3px; ??margin: 10px 0; }

和在編程語言中一樣，Less中變量的使用也是依賴于作用域。如果一個變量沒有在當前的作用域被定義，那么LESS會一直向上找，并使用最靠近的聲明的變量。

下面的代碼在編譯為css的過程中

li
會有白色的文字，因為我們在ul中提前定義了text-color變量。

@text-color: #000000; ul{ ??@text-color: #fff; ??background-color: #03A9F4; ??padding: 10px; ??list-style: none; ??li{ ????color: @text-color; ????border-radius: 3px; ????margin: 10px 0; ??} } ul { ??background-color: #03A9F4; ??padding: 10px; ??list-style: none; } ul li { ??color: #ffffff; ??border-radius: 3px; ??margin: 10px 0; }

在這里 http://lesscss.org/features/#features-overview-feature-scope 可以了解到更多關于scope的信息。

Operations

你可以對數字和顏色使用一些簡單的數學計算。如果我們有兩個相鄰的div，第二個的寬度是第一個的兩倍，同時需要有不同的背景顏色。LESS內部會知道如何計算單位來保證不出現一團糟的情況。

@div-width: 100px; @color: #03A9F4; div{ ??height: 50px; ??display: inline-block; } #left{ ??width: @div-width; ??background-color: @color - 100; } #right{ ??width: @div-width * 2; ??background-color: @color; }

div { ??height: 50px; ??display: inline-block; } #left { ??width: 100px; ??background-color: #004590; } #right { ??width: 200px; ??background-color: #03a9f4; }

Functions

LESS還有函數!這是不是越來越想一個編程語言了？

讓我們來看一看

fadeout
這個函數，這個函數用來降低顏色的透明度。

@var: #004590; div{ ??height: 50px; ??width: 50px; ??background-color: @var; ??&:hover{ ????background-color: fadeout(@var, 50%) ??} }

div { ??height: 50px; ??width: 50px; ??background-color: #004590; } div:hover { ??background-color: rgba(0, 69, 144, 0.5); }

上面這段代碼表示，當鼠標移動到div上，div的背景色會變成加上一半的透明度，而且相當的簡單。還有很多的其他的有用的函數可以用于操作顏色，檢測圖片的大小，甚至還可以將資源以data-uri形式嵌入到樣式表中。這里可以查看到完整的函數列表 http://lesscss.org/functions/.

擴展閱讀

到這里你所了解的知識已經可以讓你上手less了！所有的css文件都是有效的less樣式表，你可以開始優化你的老的，不靈活的css代碼了。除了上面的那個知識，如果你了解的更多，你會寫出更好的代碼。下面是我們推薦你們閱讀的文章：

所有語言的特性 –?http://lesscss.org/features/#features-overview-feature
LESS函數參考 –?http://lesscss.org/functions/
在線編輯和編譯 –?http://less2css.org/

譯者：wleonardo
譯文：http://www.zcfy.cc/article/3464](http://www.zcfy.cc/article/3464
原文：https://tutorialzine.com/2015/07/learn-less-in-10-minutes-or-less](https://tutorialzine.com/2015/07/learn-less-in-10-minutes-or-less

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的十分钟学会less的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。