原文連結:www.jianshu.com
這篇文章來自 Danny Markov, 是我最喜歡的博主之一,實際上我最近翻譯的一些文章全是出自他手。
在檢視本文之前你也可以 檢視原文。
1. Getting Started
Less 是用 JavaScript 寫的,所以需要額外的 Node.js 或者網頁瀏覽器才能夠執行它。你可以在你的網站中引入 less.js ,這樣在真正的執行環境下它就可以自動編譯,但這個過程非常緩慢,所以不建議這麼使用。 推薦的方式是提前編譯成 CSS 程式碼並且將一個正常的發展版本備份線上上。當然還有很多視覺化的的程式幫助你編譯 less 檔案,但是在本篇文章中我們將使用 node.js。
如果你已經安裝了 Node , 那麼你應該知道什麼是終端,接下來就開啟一個終端。安裝 less 用以下語句 :
npm install -g less
安裝完成後,你將可以在任何開啟的視窗中使用 lessc 命令,這個命令允許你將 .less 檔案編譯成純 CSS 檔案,像下面這樣:
lessc styles.less > styles.css
如果說,我們用 less 將所有的樣式寫在了 style.less 中,通過上述命令,我們就可以將程式碼轉換為純 CSS 程式碼。接下來你就可以將樣式表引入到 HTML 中了,如果在編譯過程中出現了錯誤,將會在終端的命令列中提示你。
2. 變數
Less 的一個主要功能就是可以讓你像在其它高階語言中一樣宣告變數,這樣你就可以儲存你經常使用的任何型別的值 : 顏色,尺寸,選擇器,字型名稱和 URL 等。less 的哲學是在可能的情況下重用CSS語法。
這裡,我們宣告瞭兩個變數,一個是背景顏色,一個是文字顏色,它們都是十六進位制的值。
Less 程式碼如下:
@background-color:
@text-color:
p{
background-color: @background-color;
color: @text-color;
padding: 15px;
}
ul{
background-color: @background-color;
}
li{
color: @text-color;
}
將其編譯成 CSS 程式碼如下:
p{
background-color:
color:
padding: 15px;
}
ul{
background-color:
}
li{
color:
}
在上面的例子當中,背景顏色是白色,文字顏色是黑色。比方說,現在我們要切換二者的值,也就是黑色的背景和白色的文字,我們只需要修改兩個變數的值就可以了,而不是手動的去修改每個值。
閱讀更多有關 Less 變數的內容,請看這裡。
3. Mixins
Less 允許我們將已有的 class 和 id 的樣式應用到另一個不同的選擇器上。 下面這個例子可以清楚地說明這一點。
background-color:
border-radius: 100%;
}
width: 50px;
height: 50px;
}
width: 100px;
height: 100px;
}
將其轉換成 CSS 程式碼如下
background-color:
border-radius: 100%;
}
width: 50px;
height: 50px;
background-color:
border-radius: 100%;
}
width: 100px;
height: 100px;
background-color:
border-radius: 100%;
}
如果你不想 mixin 也以一種規則的形式出現在 CSS 程式碼中,那麼你可以在它的後面加上括號:
background-color:
border-radius: 100%;
}
width: 50px;
height: 50px;
}
width: 100px;
height: 100px;
}
此時編譯成 CSS :
width: 50px;
height: 50px;
background-color:
border-radius: 100%;
}
width: 100px;
height: 100px;
background-color:
border-radius: 100%;
}
Mixin 另一個比較酷的功能就是它支援傳入引數,下面這個例子就為 circle 傳入一個指定寬高的引數,預設是 25px。 這將建立一個 25×25的小圓和一個 100×100 的大圓。
background-color:
border-radius: 100%;
width: @size;
height: @size;
}
}
}
轉換成 CSS :
background-color:
border-radius: 100%;
width: 25px;
height: 25px;
}
background-color:
border-radius: 100%;
width: 100px;
height: 100px;
}
在 官方文件 瞭解更多關於 mixin 的知識。
4. 巢狀
巢狀可用於以與頁面的HTML結構相匹配的方式構造樣式表,同時減少了衝突的機會。下面是一個無序列表的例子。
ul{
background-color:
padding: 10px;
list-style: none;
li{
background-color:
border-radius: 3px;
margin: 10px 0;
}
}
編譯成 CSS 程式碼:
ul {
background-color:
padding: 10px;
list-style: none;
}
ul li {
background-color:
border-radius: 3px;
margin: 10px 0;
}
就像在其它高階語言中一樣, Less 的變數根據範圍接受它們的值。如果在指定範圍內沒有關於變數值的宣告, less 會一直往上查詢,直至找到離它最近的宣告。
回到 CSS 中來,我們的 li 標籤將有白色的文字,如果我們在 ul 標籤中宣告 @text-color 規則。
@text-color:
ul{
@text-color:
background-color:
padding: 10px;
list-style: none;
li{
color: @text-color;
border-radius: 3px;
margin: 10px 0;
}
}
編譯生成的 CSS 程式碼如下:
ul {
background-color:
padding: 10px;
list-style: none;
}
ul li {
color:
border-radius: 3px;
margin: 10px 0;
}
在 這裡 瞭解更多關於作用域的知識。
5. 運算
你可以對數值和顏色進行基本的數學運算。比如說我們想要兩個緊鄰的 div 標籤,第二個標籤是第一個標籤的兩倍寬並且擁有不同的背景色。
@div-width: 100px;
@color:
div{
height: 50px;
display: inline-block;
}
width: @div-width;
background-color: @color - 100;
}
width: @div-width * 2;
background-color: @color;
}
編譯成 CSS 如下:
div {
height: 50px;
display: inline-block;
}
width: 100px;
background-color:
}
width: 200px;
background-color:
}
6. 函式
Less 中也有函式,這讓它看起來像一門程式語言了,不是嗎?
讓我們來看一下 fadeout, 一個降低顏色透明度的函式。
@var:
div{
height: 50px;
width: 50px;
background-color: @var;
&:hover{
background-color: fadeout(@var, 50%)
}
}
編譯成 CSS 如下所示:
div {
height: 50px;
width: 50px;
background-color:
}
div:hover {
background-color: rgba(0, 69, 144, 0.5);
}
通過上述程式碼,當我們將滑鼠懸浮在 div 上時,就可以獲取半透明度的動畫效果,這比之前自己手動設定要簡單的多了。還有很多有用的函式去操縱顏色,檢測影象的大小,甚至將資源作為data-uri嵌入樣式表,在 這裡 檢視這些函式的列表。
複製程式碼