LESS, Sass 和其他 CSS 預處理器是一種超棒的方法用來擴充 CSS 功能，使之更适合程式員。你可以使用變量、函數、混合、繼承等多種程式設計常用方法來編寫 CSS，以更少的代碼完成更多的樣式。
學習這些工具最好的方法是通過各種執行個體快速入門，今天我們向你介紹 10 個非常有用的使用 Less CSS 的執行個體。
如果你還沒接觸過 LESS CSS ，可以閱讀下面兩篇文章：
<a href="http://designshack.net/articles/css/using-less-js-to-simplify-your-css3">Using Less.js to Simplify Your CSS3</a>
<a href="http://designshack.net/articles/css/how-to-build-a-responsive-frankenstein-framework-with-less/">How to Build a Responsive Frankenstein Framework With LESS</a>
我建議是你直接可以把本文中的代碼複制粘貼到你的 .less 檔案。
可以讓你這些檔案獨立于你的項目，通過 “@import “starter.less” 來引入。
你還可以使用類似 Less.app, CodeKit 這樣的工具來将 LESS 編譯成 CSS 。
如果你更喜歡的是 Sass 而不是 LESS，沒問題，這兩個工具都很棒，它們的文法有一點不同，請看上圖。
好了，不廢話了，我們開始本文的主題！
CSS3 一個非常基本的新屬性可以快速的生産圓角效果，如上圖所示。要使用 CSS3 的圓角效果我們必須針對不同的浏覽器定義各自的字首，而如果使用了 LESS 就可以不用那麼麻煩。
我的第一個 LESS 代碼是我最簡單的 LESS 代碼之一，我需要設定圓角的半徑，而且我希望使用一個變量來調整這個半徑大小。
下面代碼使用 mixin 技術，通過定義 .border-radius 并接收一個 radius 參數，該參數預設值是 5px，你可以在多個地方重複使用該 mixin 方法：
<code>01</code>
<code>/* Mixin */</code>
<code>02</code>
<code>.border-radius (@radius:</code><code>5px</code><code>) {</code>
<code>03</code>
<code> </code><code>-webkit-border-radius: @radius;</code>
<code>04</code>
<code> </code><code>-moz-border-radius: @radius;</code>
<code>05</code>
<code> </code><code>border-radius: @radius;</code>
<code>06</code>
<code>}</code>
<code>07</code>
<code> </code>
<code>08</code>
<code>/* Implementation */</code>
<code>09</code>
<code>#somediv {</code>
<code>10</code>
<code> </code><code>.border-radius(</code><code>20px</code><code>);</code>
<code>11</code>
将這個 less 編譯成 css 後的結果是：
<code>1</code>
<code>/* Compiled CSS */</code>
<code>2</code>
<code>3</code>
<code> </code><code>-webkit-border-radius:</code><code>20px</code><code>;</code>
<code>4</code>
<code> </code><code>-moz-border-radius:</code><code>20px</code><code>;</code>
<code>5</code>
<code> </code><code>border-radius:</code><code>20px</code><code>;</code>
<code>6</code>
如果你希望使用者可自由定制四個角的半徑，那麼我們需要對上面代碼做下改進。
使用4個變量分别代表四個邊角的半徑大小：
<code>.border-radius-custom (@topleft:</code><code>5px</code><code>, @topright:</code><code>5px</code><code>, @bottomleft:</code><code>5px</code><code>, @bottomright:</code><code>5px</code><code>) {</code>
<code> </code><code>-webkit-border-radius: @topleft @topright @bottomright @bottomleft;</code>
<code> </code><code>-moz-border-radius: @topleft @topright @bottomright @bottomleft;</code>
<code> </code><code>border-radius: @topleft @topright @bottomright @bottomleft;</code>
<code> </code><code>.border-radius-custom(</code><code>20px</code><code>,</code><code>20px</code><code>,</code><code>0px</code><code>,</code><code>0px</code><code>);</code>
編譯後的 CSS
<code> </code><code>-webkit-border-radius:</code><code>20px</code> <code>20px</code> <code>0px</code> <code>0px</code><code>;</code>
<code> </code><code>-moz-border-radius:</code><code>20px</code> <code>20px</code> <code>0px</code> <code>0px</code><code>;</code>
<code> </code><code>border-radius:</code><code>20px</code> <code>20px</code> <code>0px</code> <code>0px</code><code>;</code>
另外一個 CSS3 經常用到的屬性是 box-shadow，該屬性也有不同浏覽器的字首要求，而使用 LESS 的話可以這樣：
<code>.box-shadow (@x:</code><code>0px</code><code>, @y:</code><code>3px</code><code>, @blur:</code><code>5px</code><code>, @alpha:</code><code>0.5</code><code>) {</code>
<code> </code><code>-webkit-box-shadow: @x @y @blur rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>, @alpha);</code>
<code> </code><code>-moz-box-shadow: @x @y @blur rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>, @alpha);</code>
<code> </code><code>box-shadow: @x @y @blur rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>, @alpha);</code>
<code> </code><code>.box-shadow(</code><code>5px</code><code>,</code><code>5px</code><code>,</code><code>6px</code><code>,</code><code>0.3</code><code>);</code>
生成的 CSS：
<code> </code><code>-webkit-box-shadow:</code><code>5px</code> <code>5px</code> <code>6px</code> <code>rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.3</code><code>);</code>
<code> </code><code>-moz-box-shadow:</code><code>5px</code> <code>5px</code> <code>6px</code> <code>rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.3</code><code>);</code>
<code> </code><code>box-shadow:</code><code>5px</code> <code>5px</code> <code>6px</code> <code>rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.3</code><code>);</code>
CSS3 的過渡使用起來更加麻煩，你必須最大化的支援各種浏覽器，是以你需要定義 5 個字首：
<code>.transition (@prop:</code><code>all</code><code>, @time:</code><code>1</code><code>s, @ease: linear) {</code>
<code> </code><code>-webkit-transition: @prop @time @ease;</code>
<code> </code><code>-moz-transition: @prop @time @ease;</code>
<code> </code><code>-o-transition: @prop @time @ease;</code>
<code> </code><code>-ms-transition: @prop @time @ease;</code>
<code> </code><code>transition: @prop @time @ease;</code>
<code>12</code>
<code> </code><code>.transition(</code><code>all</code><code>,</code><code>0.5</code><code>s, ease-in);</code>
<code>13</code>
<code>14</code>
<code>15</code>
<code>#somediv:hover {</code>
<code>16</code>
<code> </code><code>opacity:</code>
<code>0</code><code>;</code>
<code>17</code>
轉換後的 CSS 代碼：
<code>/* Compiled CSS*/</code>
<code> </code><code>-webkit-transition:</code><code>all</code> <code>0.5</code><code>s ease-in;</code>
<code> </code><code>-moz-transition:</code><code>all</code> <code>0.5</code><code>s ease-in;</code>
<code> </code><code>-o-transition:</code><code>all</code> <code>0.5</code><code>s ease-in;</code>
<code> </code><code>-ms-transition:</code><code>all</code> <code>0.5</code><code>s ease-in;</code>
<code> </code><code>transition:</code><code>all</code> <code>0.5</code><code>s ease-in;</code>
<code> </code><code>opacity:</code>
你可以使用 CSS3 來對元素進行角度旋轉、縮放和傾斜等效果：
<code>.transform (@rotate:</code><code>90</code><code>deg, @scale:</code><code>1</code><code>, @skew:</code><code>1</code><code>deg, @translate:</code><code>10px</code><code>) {</code>
<code> </code><code>-webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);</code>
<code> </code><code>-moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);</code>
<code> </code><code>-o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);</code>
<code> </code><code>-ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);</code>
<code> </code><code>transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);</code>
<code>#someDiv {</code>
<code> </code><code>.transform(</code><code>5</code><code>deg,</code><code>0.5</code><code>,</code><code>1</code><code>deg,</code><code>0px</code><code>);</code>
<code> </code><code>-webkit-transform: rotate(</code><code>5</code><code>deg) scale(</code><code>0.5</code><code>) skew(</code><code>1</code><code>deg) translate(</code><code>0px</code><code>);</code>
<code> </code><code>-moz-transform: rotate(</code><code>5</code><code>deg) scale(</code><code>0.5</code><code>) skew(</code><code>1</code><code>deg) translate(</code><code>0px</code><code>);</code>
<code> </code><code>-o-transform: rotate(</code><code>5</code><code>deg) scale(</code><code>0.5</code><code>) skew(</code><code>1</code><code>deg) translate(</code><code>0px</code><code>);</code>
<code> </code><code>-ms-transform: rotate(</code><code>5</code><code>deg) scale(</code><code>0.5</code><code>) skew(</code><code>1</code><code>deg) translate(</code><code>0px</code><code>);</code>
<code>7</code>
<code> </code><code>transform: rotate(</code><code>5</code><code>deg) scale(</code><code>0.5</code><code>) skew(</code><code>1</code><code>deg) translate(</code><code>0px</code><code>);</code>
<code>8</code>
漸變是 CSS3 最複雜的屬性之一，有上百萬中不同的設定組合，但我們常用的無非幾種。
<code>.gradient (@origin:</code><code>left</code><code>, @start:</code><code>#ffffff</code><code>, @</code><code>stop</code><code>:</code><code>#000000</code><code>) {</code>
<code> </code><code>background-color</code><code>: @start;</code>
<code> </code><code>background-image</code><code>: -webkit-linear-gradient(@origin, @start, @stop);</code>
<code> </code><code>background-image</code><code>: -moz-linear-gradient(@origin, @start, @stop);</code>
<code> </code><code>background-image</code><code>: -o-linear-gradient(@origin, @start, @stop);</code>
<code> </code><code>background-image</code><code>: -ms-linear-gradient(@origin, @start, @stop);</code>
<code> </code><code>background-image</code><code>: linear-gradient(@origin, @start, @stop);</code>
<code> </code><code>.gradient(</code><code>left</code><code>,</code><code>#663333</code><code>,</code><code>#333333</code><code>);</code>
生成的 CSS
<code> </code><code>background-color</code><code>:</code><code>#663333</code><code>;</code>
<code> </code><code>background-image</code><code>: -webkit-linear-gradient(</code><code>left</code><code>,</code><code>#663333</code><code>,</code><code>#333333</code><code>);</code>
<code> </code><code>background-image</code><code>: -moz-linear-gradient(</code><code>left</code><code>,</code><code>#663333</code><code>,</code><code>#333333</code><code>);</code>
<code> </code><code>background-image</code><code>: -o-linear-gradient(</code><code>left</code><code>,</code><code>#663333</code><code>,</code><code>#333333</code><code>);</code>
<code> </code><code>background-image</code><code>: -ms-linear-gradient(</code><code>left</code><code>,</code><code>#663333</code><code>,</code><code>#333333</code><code>);</code>
<code> </code><code>background-image</code><code>: linear-gradient(</code><code>left</code><code>,</code><code>#663333</code><code>,</code><code>#333333</code><code>);</code>
<code>9</code>
建立漸變最讨厭的事情之一就是找出你的顔色。有時你隻是想快速在現有顔色上做一些漸變效果。
這裡我們使用從透明開始到全黑的漸變效果，你需要設定的就是最初顔色已經透明度 alpha 值：
<code>.quick-gradient (@origin:</code><code>left</code><code>, @alpha:</code><code>0.2</code><code>) {</code>
<code> </code><code>background-image</code><code>: -webkit-linear-gradient(@origin, rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.0</code><code>), rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,@alpha));</code>
<code> </code><code>background-image</code><code>: -moz-linear-gradient(@origin, rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.0</code><code>), rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,@alpha));</code>
<code> </code><code>background-image</code><code>: -o-linear-gradient(@origin, rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.0</code><code>), rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,@alpha));</code>
<code> </code><code>background-image</code><code>: -ms-linear-gradient(@origin, rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.0</code><code>), rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,@alpha));</code>
<code> </code><code>background-image</code><code>: linear-gradient(@origin, rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.0</code><code>), rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,@alpha));</code>
<code> </code><code>background-color</code><code>: BADA</code><code>55</code><code>;</code>
<code> </code><code>.quick-gradient(</code><code>top</code><code>,</code><code>0.2</code><code>);</code>
<code> </code><code>background-image</code><code>: -webkit-linear-gradient(</code><code>top</code><code>, rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>), rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.2</code><code>));</code>
<code> </code><code>background-image</code><code>: -moz-linear-gradient(</code><code>top</code><code>, rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>), rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.2</code><code>));</code>
<code> </code><code>background-image</code><code>: -o-linear-gradient(</code><code>top</code><code>, rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>), rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.2</code><code>));</code>
<code> </code><code>background-image</code><code>: -ms-linear-gradient(</code><code>top</code><code>, rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>), rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.2</code><code>));</code>
<code> </code><code>background-image</code><code>: linear-gradient(</code><code>top</code><code>, rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>), rgba(</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0</code><code>,</code><code>0.2</code><code>));</code>
CSS3 中的鏡像效果在浏覽器都是普遍支援的。你需要做的就是設定長度和不透明度這兩個參數，很簡單：
<code>.reflect (@length:</code><code>50%</code><code>, @opacity:</code><code>0.2</code><code>){</code>
<code> </code><code>-webkit-box-reflect:</code><code>below</code> <code>0px</code> <code>-webkit-gradient(linear,</code><code>left</code> <code>top</code><code>,</code>
<code> </code><code>left</code>
<code>bottom</code><code>, from(</code><code>transparent</code><code>),</code>
<code> </code><code>color-stop(@length,</code><code>transparent</code><code>), to(rgba(</code><code>255</code><code>,</code><code>255</code><code>,</code><code>255</code><code>,@opacity)));</code>
<code> </code><code>.reflect(</code><code>20%</code><code>,</code><code>0.2</code><code>);</code>
<code> </code><code>-webkit-box-reflect:</code><code>below</code> <code>0px</code> <code>-webkit-gradient(linear,</code><code>left</code> <code>top</code><code>,</code><code>left</code> <code>bottom</code><code>, from(</code><code>transparent</code><code>), color-stop(</code><code>20%</code><code>,</code><code>transparent</code><code>), to(rgba(</code><code>255</code><code>,</code><code>255</code><code>,</code><code>255</code><code>,</code><code>0.2</code><code>)));</code>
LESS 和 Sass 最獨特的功能就是顔色計算函數，你可以輕松使用 LESS 來建立各種調色闆，下面是兩個簡單的例子。
這裡我們使用一個基本色，然後通過彩色旋轉以及加亮和變暗方法擴充到5個不同色闆。為了生成互補色，我們使用 spin 将顔色旋轉 180 度：
<code>@base:</code><code>#663333</code><code>;</code>
<code>@complement</code><code>1:</code>
<code>spin(@base,</code><code>180</code><code>);</code>
<code>@complement</code><code>2:</code>
<code>darken(spin(@base,</code><code>180</code><code>),</code><code>5%</code><code>);</code>
<code>@lighten</code><code>1:</code>
<code>lighten(@base,</code><code>15%</code><code>);</code>
<code>@lighten</code><code>2:</code>
<code>lighten(@base,</code><code>30%</code><code>);</code>
<code>.one {</code><code>color</code><code>: @base;}</code>
<code>.two {</code><code>color</code><code>: @complement</code><code>1</code><code>;}</code>
<code>.three {</code><code>color</code><code>: @complement</code><code>2</code><code>;}</code>
<code>.four {</code><code>color</code><code>: @lighten</code><code>1</code><code>;}</code>
<code>.five {</code><code>color</code><code>: @lighten</code><code>2</code><code>;}</code>
<code>.one {</code><code>color</code><code>:</code><code>#663333</code><code>;}</code>
<code>.two {</code><code>color</code><code>:</code><code>#336666</code><code>;}</code>
<code>.three {</code><code>color</code><code>:</code><code>#2b5555</code><code>;}</code>
<code>.four {</code><code>color</code><code>:</code><code>#994d4d</code><code>;}</code>
<code>.five {</code><code>color</code><code>:</code><code>#bb7777</code><code>;}</code>
互補色很有用，但在網頁設計中另外一個更有用的就是顔色微調：
<code>@lighter</code><code>1:</code>
<code>lighten(spin(@base,</code><code>5</code><code>),</code><code>10%</code><code>);</code>
<code>@lighter</code><code>2:</code>
<code>lighten(spin(@base,</code><code>10</code><code>),</code><code>20%</code><code>);</code>
<code>@darker</code><code>1:</code>
<code>darken(spin(@base,</code><code>-5</code><code>),</code><code>10%</code><code>);</code>
<code>@darker</code><code>2:</code>
<code>darken(spin(@base,</code><code>-10</code><code>),</code><code>20%</code><code>);</code>
<code>.two {</code><code>color</code><code>: @lighter</code><code>1</code><code>;}</code>
<code>.three {</code><code>color</code><code>: @lighter</code><code>2</code><code>;}</code>
<code>.four {</code><code>color</code><code>: @darker</code><code>1</code><code>;}</code>
<code>.five {</code><code>color</code><code>: @darker</code><code>2</code><code>;}</code>
<code>.two {</code><code>color</code><code>:</code><code>#884a44</code><code>;}</code>
<code>.three {</code><code>color</code><code>:</code><code>#aa6355</code><code>;}</code>
<code>.four {</code><code>color</code><code>:</code><code>#442225</code><code>;}</code>
<code>.five {</code><code>color</code><code>:</code><code>#442225</code><code>;}</code>
到這裡我們這篇文章就結束了，主要的目的是講述使用 LESS 處理一些常用的 CSS3 處理效果。