LESS CSS 實例

值得參考的 10 個 LESS CSS 實例  

2

收藏(185)

LESS, Sass 和其餘 CSS 預處理器是一種超棒的方法用來擴展 CSS 功能，使之更適合程序員。你能夠使用變量、函數、混合、繼承等多種編程經常使用方法來編寫 CSS，以更少的代碼完成更多的樣式。

學習這些工具最好的方法是經過各類實例快速入門，今天咱們向你介紹 10 個很是有用的使用 Less CSS 的實例。

使用 LESS

若是你還沒接觸過 LESS CSS ，能夠閱讀下面兩篇文章：

• Using Less.js to Simplify Your CSS3
• How to Build a Responsive Frankenstein Framework With LESS

我該如何使用這些實例

我建議是你直接能夠把本文中的代碼複製粘貼到你的 .less 文件。

可讓你這些文件獨立於你的項目，經過 「@import 「starter.less」 來引入。

你還能夠使用相似 Less.app, CodeKit 這樣的工具來將 LESS 編譯成 CSS 。

若是我使用的是 Sass

若是你更喜歡的是 Sass 而不是 LESS，沒問題，這兩個工具都很棒，它們的語法有一點不一樣，請看上圖。二者更詳細的比較請看這裏。

好了，不廢話了，咱們開始本文的主題！

圓角

CSS3 一個很是基本的新屬性能夠快速的生產圓角效果，如上圖所示。要使用 CSS3 的圓角效果咱們必須針對不一樣的瀏覽器定義各自的前綴，而若是使用了 LESS 就能夠不用那麼麻煩。

1. 簡單的圓角半徑

個人第一個 LESS 代碼是我最簡單的 LESS 代碼之一，我須要設置圓角的半徑，並且我但願使用一個變量來調整這個半徑大小。

下面代碼使用 mixin 技術，經過定義 .border-radius 並接收一個 radius 參數，該參數默認值是 5px，你能夠在多個地方重複使用該 mixin 方法：

/* Mixin */
.border-radius (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; } /* Implementation */ #somediv { .border-radius(20px); }

 

將這個 less 編譯成 css 後的結果是：

/* Compiled CSS */
#somediv { -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; }

 

2. 四角的半徑定製

若是你但願用戶可自由定製四個角的半徑，那麼咱們須要對上面代碼作下改進。

使用4個變量分別表明四個邊角的半徑大小：

/* Mixin */
.border-radius-custom (@topleft: 5px, @topright: 5px, @bottomleft: 5px, @bottomright: 5px) { -webkit-border-radius: @topleft @topright @bottomright @bottomleft; -moz-border-radius: @topleft @topright @bottomright @bottomleft; border-radius: @topleft @topright @bottomright @bottomleft; } /* Implementation */ #somediv { .border-radius-custom(20px, 20px, 0px, 0px); }

編譯後的 CSS

/* Compiled CSS */
#somediv { -webkit-border-radius: 20px 20px 0px 0px; -moz-border-radius: 20px 20px 0px 0px; border-radius: 20px 20px 0px 0px; }

 

3. 方塊陰影 Box Shadow

另一個 CSS3 常常用到的屬性是 box-shadow，該屬性也有不一樣瀏覽器的前綴要求，而使用 LESS 的話能夠這樣：

/* Mixin */
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) { -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); box-shadow: @x @y @blur rgba(0, 0, 0, @alpha); } /* Implementation */ #somediv { .box-shadow(5px, 5px, 6px, 0.3); }

生成的 CSS：

/* Compiled CSS */
#somediv { -webkit-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3); -moz-box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3); box-shadow: 5px 5px 6px rgba(0, 0, 0, 0.3); }

 

4. 元素過渡效果 Transition

CSS3 的過渡使用起來更加麻煩，你必須最大化的支持各類瀏覽器，所以你須要定義 5 個前綴：

/* Mixin */
.transition (@prop: all, @time: 1s, @ease: linear) { -webkit-transition: @prop @time @ease; -moz-transition: @prop @time @ease; -o-transition: @prop @time @ease; -ms-transition: @prop @time @ease; transition: @prop @time @ease; } /* Implementation */ #somediv { .transition(all, 0.5s, ease-in); } #somediv:hover { opacity: 0; }

 

轉換後的 CSS 代碼：

/* Compiled CSS*/
#somediv { -webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; transition: all 0.5s ease-in; } #somediv:hover { opacity: 0; }

 

 

5. 轉換/旋轉 Transform

你能夠使用 CSS3 來對元素進行角度旋轉、縮放和傾斜等效果：

/* Mixin */
.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) { -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); -o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate); } /* Implementation */ #someDiv { .transform(5deg, 0.5, 1deg, 0px); }

生成的 CSS：

/* Compiled CSS*/
#someDiv { -webkit-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px); -moz-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px); -o-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px); -ms-transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px); transform: rotate(5deg) scale(0.5) skew(1deg) translate(0px); }

 

 

顏色漸變 Gradients

漸變是 CSS3 最複雜的屬性之一，有上百萬中不一樣的設置組合，但咱們經常使用的無非幾種。

6. 線性漸變 Linear Gradient

咱們仍是從最簡單的開始，實現兩個不一樣顏色之間的漸變，你能夠定義開始顏色和最終顏色，這裏咱們使用最新的漸變語法，瀏覽器的支持狀況請看這裏。

/* Mixin */
.gradient (@origin: left, @start: #ffffff, @stop: #000000) { background-color: @start; background-image: -webkit-linear-gradient(@origin, @start, @stop); background-image: -moz-linear-gradient(@origin, @start, @stop); background-image: -o-linear-gradient(@origin, @start, @stop); background-image: -ms-linear-gradient(@origin, @start, @stop); background-image: linear-gradient(@origin, @start, @stop); } /* Implementation */ #someDiv { .gradient(left, #663333, #333333); }

生成的 CSS

/* Compiled CSS */
#someDiv { background-color: #663333; background-image: -webkit-linear-gradient(left, #663333, #333333); background-image: -moz-linear-gradient(left, #663333, #333333); background-image: -o-linear-gradient(left, #663333, #333333); background-image: -ms-linear-gradient(left, #663333, #333333); background-image: linear-gradient(left, #663333, #333333); }

 

7. 快速漸變 Quick Gradient

建立漸變最討厭的事情之一就是找出你的顏色。有時你只是想快速在現有顏色上作一些漸變效果。

這裏咱們使用從透明開始到全黑的漸變效果，你須要設置的就是最初顏色已經透明度 alpha 值：

/* Mixin */
.quick-gradient (@origin: left, @alpha: 0.2) { background-image: -webkit-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); background-image: -moz-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); background-image: -o-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); background-image: -ms-linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); background-image: linear-gradient(@origin, rgba(0,0,0,0.0), rgba(0,0,0,@alpha)); } /* Implementation */ #somediv { background-color: BADA55; .quick-gradient(top, 0.2); }

生成的 CSS：

/* Compiled CSS */
#somediv { background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2)); }

 

8. 鏡像效果 Webkit Reflection

CSS3 中的鏡像效果在瀏覽器都是廣泛支持的。你須要作的就是設置長度和不透明度這兩個參數，很簡單：

/* Mixin */
.reflect (@length: 50%, @opacity: 0.2){ -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(@length, transparent), to(rgba(255,255,255,@opacity))); } /* Implementation */ #somediv { .reflect(20%, 0.2); }

生成的 CSS：

/* Compiled CSS */
 
#somediv { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(20%, transparent), to(rgba(255, 255, 255, 0.2))); }

 

顏色計算 Color Math

LESS 和 Sass 最獨特的功能就是顏色計算函數，你能夠輕鬆使用 LESS 來建立各類調色板，下面是兩個簡單的例子。

9. 互補色方案 Complementary Color Scheme

這裏咱們使用一個基本色，而後經過彩色旋轉以及加亮和變暗方法擴展到5個不一樣色板。爲了生成互補色，咱們使用 spin 將顏色旋轉 180 度：

/* Mixin */
@base: #663333; @complement1: spin(@base, 180); @complement2: darken(spin(@base, 180), 5%); @lighten1: lighten(@base, 15%); @lighten2: lighten(@base, 30%); /* Implementation */ .one {color: @base;} .two {color: @complement1;} .three {color: @complement2;} .four {color: @lighten1;} .five {color: @lighten2;}

生成的 CSS：

/* Compiled CSS */
.one {color: #663333;} .two {color: #336666;} .three {color: #2b5555;} .four {color: #994d4d;} .five {color: #bb7777;}

 

10. 顏色微調 Subtle Color Scheme

互補色頗有用，但在網頁設計中另一個更有用的就是顏色微調：

/* Mixin */
@base: #663333; @lighter1: lighten(spin(@base, 5), 10%); @lighter2: lighten(spin(@base, 10), 20%); @darker1: darken(spin(@base, -5), 10%); @darker2: darken(spin(@base, -10), 20%); /* Implementation */ .one {color: @base;} .two {color: @lighter1;} .three {color: @lighter2;} .four {color: @darker1;} .five {color: @darker2;}

生成的 CSS：

/* Compiled CSS */
.one {color: #663333;} .two {color: #884a44;} .three {color: #aa6355;} .four {color: #442225;} .five {color: #442225;}

 

結論

到這裏咱們這篇文章就結束了，主要的目的是講述使用 LESS 處理一些經常使用的 CSS3 處理效果。