定義圓角及調用 /* 定義圓角 @radius 圓角大小 */ .round(@radius:5px){ border-radius:@radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } .round7{ .round(7px); } 定義盒子陰影及調用 /* 盒子陰影 @right_left 右邊陰影為正數 左邊負數 @bottom_top 下邊陰影為正數 上邊負數 @box 陰影大小 @box_color 陰影顏色 */ .boxshadow(@right_left:5px,@bottom_top:5px,@box :5px,@box_color:#b6ebf7){ box-shadow:@arguments; -moz-box-shadow:@arguments; -webkit-box-shadow:@arguments; } .boxshadow7{ .boxshadow(7px,7px,7px,black); } 定義文字陰影及調用 /* 文字陰影,可以指定多組陰影 @right_left1 右邊陰影為正數 左邊負數 @bottom_top1 下邊陰影為正數 上邊負數 @text 陰影大小 @text_color 陰影顏色 */ .textshadow(@right_left1:5px,@bottom_top1:5px,@text :5px,@tetx_color:#b6ebf7){ text-shadow:@arguments; } .r_b_textshadow{ .textshadow(); } 定義透明度及調用 /* 透明度 或漸變 1為不透明 0透明 css3 rgba(110, 142, 185, .4)!important;前三個是顏色值 后一個是透明值 用來兼容所有瀏覽器 */ .rgba(@rgba_a:.4,@rgb_b:40){ filter: alpha(opacity=@rgb_b); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{rgb_b})"; opacity:@rgb_a; } .rgba4{ .rgba(); } 定義列布局及調用 /* 列布局 @c1 列數 @c2 列寬 @c3 列間距 @c4 邊框樣式 */ .column(@c1:3,@c2:310px,@c3:10px,@c4:1px solid #ccc){ column-count:@c1; column-width:@c2; column-gap:@c3; column-rule:@c4; -webkit-column-count:@c1; -webkit-column-width:@c2; -webkit-column-gap:@c3; -webkit-column-rule:@c4; -moz-column-count:@c1; -moz-column-width:@c2; -moz-column-gap:@c3; -moz-column-rule:@c4; } .my_column{ .column(3,50px,3px,1px solid #ccc); } 定義背景漸變及調用 復制代碼 /*背景漸變 @start 漸變開始顏色 @end 結束顏色 */ .bg(@start :#00ffff,@end :#9fffff){ background:-webkit-gradient(linear,0 0, 0 100%,from(@start),to(@end)); background:-moz-linear-gradient(top,@start ,@end); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=@start , endColorstr=@end ,grandientType=0); } .my_bg{ .bg(red,yellow); } image 定義輪廓內部框及調用 /* 畫輪廓 就是內部框 @outline 樣式 @outline1 間距 負數在內部 */ .outline(@outline:1px solid #699,@outline1:-10px){ outline:@outline; outline-offset:@outline1; } .my_outline{ .outline(); } image 定義旋轉，菱形旋轉，縮放，移動及調用 /* 旋轉角度 @ro定義度數 IE不支持 濾鏡支持0，1，2，3 */ .rotate(@ro :30deg){ transform: rotate(@ro); -webkit-transform: rotate(@ro); -moz-transform: rotate(@ro); -o-transform: rotate(@ro); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .rotate50{ .rotate(50deg); } /* 菱形旋轉角度 @x橫向縮放比例 @y縱向縮放比例 */ .skew(@roX :30deg,@roY :30deg){ transform: skew(@roX,@roY); -webkit-transform: skew(@roX,@roY); -moz-transform: skew(@roX,@roY); -o-transform: skew(@roX,@roY); -ms-transform: skew(@roX,@roY) ; } .skew30{ .skew(50deg); } /* 放大縮小 @x橫向縮放比例 @y縱向縮放比例 */ .scale(@x :1.2,@y :1.2){ transform: scale(@x,@y); -webkit-transform: scale(@x,@y); -moz-transform: scale(@x,@y); -o-transform: scale(@x,@y); -ms-transform: scale(@x,@y); } .my_scale{ .scale(); } /* 移動距離 @x橫向移動距離 @y縱向移動距離 */ .translate(@x :80px,@y :80px){ transform: translate(@x,@y); -webkit-transform: translate(@x,@y); -moz-transform: translate(@x,@y); -o-transform: translate(@x,@y); -ms-transform: translate(@x,@y); } .translate80{ .translate(); } /* 綜合上面4種變化,效果看下面的過度動畫 @rotate @scale @skew @translate */ .transform(@rotate :360deg,@scaleX :1,@scaleY :1,@skewX :0deg,@skewY :0deg,@translateX :100px,@translateY :0px){ transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY); -webkit-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY); -moz-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY); -o-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY); -ms-transform: rotate(@rotate) scale(@scaleX,@scaleY) skew(@skewX,@skewY) translate(@translateX,@translateY); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); } .my_transform{ .transform(); } 定義過度動畫及調用 /* 過度動畫 id是css屬性 2s過度時間 0s是開始時間 ease-in進入 */ .tran(@t :id 2s ease-in 0s){ transition:@t ; -moz-transition:@t ; -o-transition:@t ; -webkit-transition:@t ; } .my_tran{ &:hover{ .transform(); .tran(all 2s ease-in 0s); } } 定義Animation動畫及調用 /* less文件中定義的函數 Animation 動畫 @animation-name規定需要綁定到選擇器的 keyframe 名稱 @animation-duration規定完成動畫所花費的時間，以秒或毫秒計,默認是 0。 @animation-timing-function規定動畫的速度曲線。默認是 "ease"。 @animation-delay規定在動畫開始之前的延遲。默認是 0。 @animation-iteration-count規定動畫應該播放的次數。默認是 1。 @animation-direction規定是否應該輪流反向播放動畫。默認是 "normal"。 */ .animation(@animation-name,@animation-duration,@animation-timing-function, @animation-delay,@animation-iteration-count,@animation-direction){ animation: @arguments; /* Firefox: */ -moz-animation: @arguments; /* Safari 和 Chrome: */ -webkit-animation: @arguments; /* Opera: */ -o-animation: @arguments; } .my_animation{ .animation(mykeyframes,5s,linear,2s,infinite,normal); } /***CSS定義的keyframes如下：****/ @keyframes mykeyframes { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } @-moz-keyframes mykeyframes /* Firefox */ { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } @-webkit-keyframes mykeyframes /* Safari 和 Chrome */ { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } @-o-keyframes mykeyframes /* Opera */ { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} }
以下寫的就是關於使用less對顏色搭配的技巧。
在本教程中，我們將使用LESS中的一些函數幫助你控制顏色，更好地配色並保持其組織性。
前言：用LESS CSS框架進行編碼會簡化代碼結構，提高我們的工作效率，但是試驗后你會發現，默認情況下，LESS在Firefox中能被正確編譯，實現效果，但IE和Chrome是無法解析LESS代碼的，必須對瀏覽器進行一些設置才行。如果希望對LESS有一個最基礎的了解，IBM 對LESS CSS框架的簡介會幫到你http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/
使用LESS color函數創建配色方案
LESS提供了一些函數，使定義和操作顏色變得超級簡單。在本教程中，我們將使用其中的一些函數幫助你控制顏色，更好地配色並保持其組織性。
色輪
首先是spin()函數，它可以讓我們在色輪上指定一種顏色。這個函數是非常有用的，比如說，在進行配色的時候。你可能已經看過一些常見的顏色結構，以一種和諧的方式進行組合，比如說互補色，三元色，混合色。使用一些工具，像 Adobe ColorCC (原名Kuler)，你可以遵循這些結構快速的生成配色方案。但是如何使用LESS制定我們自己的配色方案呢？
互補色
我們將以生成最簡單地色彩結構——互補色開始。這種互補的顏色正好在色輪相反的位置。
首先，我們定義一種基准色，然后參照基准色定義第二種顏色。挑選一種你最喜歡的，或者是任意一種突然浮現在你腦海里的顏色。這里我們挑選了一種青藍色，#3bafdA，作為實例：
由於想要在色輪上得到基准色的補色，我們將度數值設為180。
@color-base : #3bafdA;
@color-complement : spin(@color-base, 180);
這讓我們得到兩個精確、可愛的顏色，它們是互補的。
以下是將這些顏色應用到網頁原型設計中的一個例子：
三元色
我們可以進一步探討顏色模型並且創建一個三元色結構。“三元”，顧名思義，是由三種顏色組成。因此，我們將色輪分成三部分，並且用函數spin()來設置旋轉的度數：
// Triadic structure
@color-base : #3bafdA;
@triadic-secondary : spin(@color-base, -(360 / 3));
@triadic-tertiary : spin(@color-base, (360 / 3));
結果證明同樣是不錯的：
混合色
創建配色方案的另一種方式是對兩種顏色進行混合，也許就像你上小學美術課時學到的那樣。例如，如果我們把紅色與黃色混合，我們會得到橙色。在LESS中，我們可以使用mix()函數實現同樣的效果：
div {
color: mix(red, yellow);
}
這個例子的輸出的是“#ff8000”——“橙色”的准確的十六進制顏色編碼：
div {
color: #ff8000;
}
提示
避免混合頻譜相同的顏色。對於基准色#3bafdA——位於可見光譜藍色光的范圍之內，通過與一種對立的顏色進行混合我們將得到一種比較滿意的結果，比如說中紫羅蘭紅或者淺海綠色：
@color-base : #3bafdA;
@color-primary : mix(@color-base, mediumvioletred);
@color-secondary : mix(@color-base, lightseagreen);
@color-tertiary : mix(@color-base, mintcream);
這給了我們一個可愛的配色方案，所有生成的顏色由於繼承相同的色調#3bafdA而顯得非常和諧。
假如你對色彩一無所知，你可以挑選一種你最喜歡的顏色，通過mix()函數與其他任何一種顏色進行混合，結果可能令你大吃一驚。
以下有一個采用混合色得到的結果進行手機原型設計的例子：
顏色的色調和飽和度
讓我們研究一些其他的配色方法。
明暗度
明暗度定義了一種顏色明與暗的程度。在網頁設計中，明暗度一般用來區分元素的狀態。舉個例子，一個按鈕，可能在:hover時是較淺的顏色，在:focus時是較深的顏色。在LESS里，我們就可以分別使用函數darken()和lighten()使一種顏色深一點或者淺一點。
@color-base : #3bafdA;
@color-hover : lighten(@color-primary, 10%); //#9c84c1
@color-focus : darken(@color-primary, 10%); //#684b94
結果是：
飽和度
或者，我們可以調整顏色飽和度來代替明暗度。飽和度定義了一種顏色的深度。飽和度越大，顏色越亮麗，最低飽和度則會使顏色趨於灰色。
拿上面的例子來說，我們可以用saturate() 和 desaturate()函數來替換明暗度的函數，此外，還可以定義未激活狀態的顏色。
@color-base : #3bafdA;
@color-hover : saturate(@color-primary, 10%);
@color-focus : desaturate(@color-primary, 10%);
@color-disable : lightness(desaturate(@color-primary, 100%), 30%);
進一步調整顏色的不飽和度，直到認為它在你的設計背景中合適為止。
現在當我們自定義按鈕樣式的時候，我們的變量色都是與基准色緊密聯系的；當基准色改變的時候，它們都會進行相應的變化。
智能色彩輸出
LESS讓我們的樣式變得更智能。舉例來說，我們能讓我們的樣式自己“思考”並決定什么顏色在什么條件下適用。假設我們正在創建一個網站模板，這是按鈕的基本樣式，你打算用不同的顏色和風格來擴展它。但是我們怎樣控制顏色的輸出呢？我們當然不希望深色的文字在深色的背景上，反之亦然。我們需要確保文本保留對比，以便於閱讀，這樣，contrast()函數就派上用場了。
@body-bg: #000;
body {
color: contrast(@body-bg);
}
在上面的例子中，我們通過contrast()函數來設置顏色。這樣確保文本顏色與背景顏色有足夠的反差。在這種情況下，由於背景顏色是#000,文本顏色應該返回#fff。如果你設置背景色為淺色，比如說白色，煙白，或者天藍色，文本顏色應該返回#000。
body {
color: #fff;
}
你也可以自定義顏色的明暗。在下面的例子中，顏色值將返回#999或#777，而不是#fff，或者#000。
@body-bg : #f0f0f0;
@color-light : #999;
@color-dark : #777;
body {
color: contrast(@body-bg, @color-dark, @color-light);
}
通常情況下，如果顏色是透明的，尤其是背景顏色，我也不想輸出顏色聲明。對此，我們可以在LESS 混合閉包內封裝background聲明。
@bg: transparent;
.element {
& when not (@bg = transaprent) {
background: @bg;
}
}
你也可以為border屬性和color屬性作同樣的聲明，並通過刪除不必要的規則在你的樣式表里只保留幾行代碼。你同樣可以在聲明border與color屬性時做同樣的事，並只保留一些必要的代碼。
結束語
我希望我介紹的某些函數能幫助你在設計中提升配色能力。你可以在LESS官網上上找到完整的函數清單，並試驗它。我非常同意Kezz Bracey的說法。配色的唯一方法就是反復的試驗。
“直到我通過反復試驗來開始創建可靠的配色方案，我所看過的所有色彩理論才開始變得有意義”