定義圓角及調(diào)用
 
/*
定義圓角
@radius 圓角大小
*/
.round(@radius:5px){
    border-radius:@radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}
.round7{
   .round(7px);
}
 
 
 
定義盒子陰影及調(diào)用
 
/*
盒子陰影
@right_left 右邊陰影為正數(shù) 左邊負(fù)數(shù)
@bottom_top 下邊陰影為正數(shù) 上邊負(fù)數(shù)
@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);
}
 
 
定義文字陰影及調(diào)用
 
/*
文字陰影,可以指定多組陰影
@right_left1 右邊陰影為正數(shù) 左邊負(fù)數(shù)
@bottom_top1 下邊陰影為正數(shù) 上邊負(fù)數(shù)
@text  陰影大小
@text_color 陰影顏色
*/
.textshadow(@right_left1:5px,@bottom_top1:5px,@text :5px,@tetx_color:#b6ebf7){
    text-shadow:@arguments;
}
.r_b_textshadow{
  .textshadow();
}
 
 
定義透明度及調(diào)用
 
/*
透明度 或漸變 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();
}
 
 
 
定義列布局及調(diào)用
 
/*
列布局
@c1 列數(shù)
@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);
}
 
 
定義背景漸變及調(diào)用
復(fù)制代碼
/*背景漸變
@start  漸變開始顏色
@end  結(jié)束顏色
*/
.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
 
定義輪廓內(nèi)部框及調(diào)用
 
/*
畫輪廓 就是內(nèi)部框
@outline 樣式
@outline1 間距 負(fù)數(shù)在內(nèi)部
*/
.outline(@outline:1px solid #699,@outline1:-10px){
    outline:@outline;
    outline-offset:@outline1;
}
.my_outline{
    .outline();
}
 
image
 
定義旋轉(zhuǎn)，菱形旋轉(zhuǎn)，縮放，移動及調(diào)用
 
/*
旋轉(zhuǎn)角度
@ro定義度數(shù) 
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);
}
 
/*
菱形旋轉(zhuǎn)角度
@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();
}
 
定義過度動畫及調(diào)用
 
/*
過度動畫 
id是css屬性
2s過度時間 0s是開始時間
ease-in進(jìn)入
*/
.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動畫及調(diào)用
 
/*
less文件中定義的函數(shù)
Animation 動畫 
@animation-name規(guī)定需要綁定到選擇器的 keyframe 名稱
@animation-duration規(guī)定完成動畫所花費(fèi)的時間，以秒或毫秒計(jì),默認(rèn)是 0。
@animation-timing-function規(guī)定動畫的速度曲線。默認(rèn)是 "ease"。
@animation-delay規(guī)定在動畫開始之前的延遲。默認(rèn)是 0。
@animation-iteration-count規(guī)定動畫應(yīng)該播放的次數(shù)。默認(rèn)是 1。
@animation-direction規(guī)定是否應(yīng)該輪流反向播放動畫。默認(rèn)是 "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;}
}

以下寫的就是關(guān)于使用less對顏色搭配的技巧。

在本教程中，我們將使用LESS中的一些函數(shù)幫助你控制顏色，更好地配色并保持其組織性。

前言：用LESS CSS框架進(jìn)行編碼會簡化代碼結(jié)構(gòu)，提高我們的工作效率，但是試驗(yàn)后你會發(fā)現(xiàn)，默認(rèn)情況下，LESS在Firefox中能被正確編譯，實(shí)現(xiàn)效果，但I(xiàn)E和Chrome是無法解析LESS代碼的，必須對瀏覽器進(jìn)行一些設(shè)置才行。如果希望對LESS有一個最基礎(chǔ)的了解，IBM 對LESS CSS框架的簡介會幫到你http://www.ibm.com/developerworks/cn/web/1207_zhaoch_lesscss/

使用LESS color函數(shù)創(chuàng)建配色方案

LESS提供了一些函數(shù)，使定義和操作顏色變得超級簡單。在本教程中，我們將使用其中的一些函數(shù)幫助你控制顏色，更好地配色并保持其組織性。

色輪

首先是spin()函數(shù)，它可以讓我們在色輪上指定一種顏色。這個函數(shù)是非常有用的，比如說，在進(jìn)行配色的時候。你可能已經(jīng)看過一些常見的顏色結(jié)構(gòu)，以一種和諧的方式進(jìn)行組合，比如說互補(bǔ)色，三元色，混合色。使用一些工具，像Adobe ColorCC(原名Kuler)，你可以遵循這些結(jié)構(gòu)快速的生成配色方案。但是如何使用LESS制定我們自己的配色方案呢？

互補(bǔ)色

我們將以生成最簡單地色彩結(jié)構(gòu)——互補(bǔ)色開始。這種互補(bǔ)的顏色正好在色輪相反的位置。

首先，我們定義一種基準(zhǔn)色，然后參照基準(zhǔn)色定義第二種顏色。挑選一種你最喜歡的，或者是任意一種突然浮現(xiàn)在你腦海里的顏色。這里我們挑選了一種青藍(lán)色，#3bafdA，作為實(shí)例：

由于想要在色輪上得到基準(zhǔn)色的補(bǔ)色，我們將度數(shù)值設(shè)為180。

@color-base : #3bafdA;
@color-complement : spin(@color-base, 180);

這讓我們得到兩個精確、可愛的顏色，它們是互補(bǔ)的。

以下是將這些顏色應(yīng)用到網(wǎng)頁原型設(shè)計(jì)中的一個例子：

三元色

我們可以進(jìn)一步探討顏色模型并且創(chuàng)建一個三元色結(jié)構(gòu)。“三元”，顧名思義，是由三種顏色組成。因此，我們將色輪分成三部分，并且用函數(shù)spin()來設(shè)置旋轉(zhuǎn)的度數(shù)：

// Triadic structure
@color-base : #3bafdA;
@triadic-secondary : spin(@color-base, -(360 / 3));
@triadic-tertiary : spin(@color-base, (360 / 3));

結(jié)果證明同樣是不錯的：

混合色

創(chuàng)建配色方案的另一種方式是對兩種顏色進(jìn)行混合，也許就像你上小學(xué)美術(shù)課時學(xué)到的那樣。例如，如果我們把紅色與黃色混合，我們會得到橙色。在LESS中，我們可以使用mix()函數(shù)實(shí)現(xiàn)同樣的效果：

div {
color: mix(red, yellow);
}

這個例子的輸出的是“#ff8000”——“橙色”的準(zhǔn)確的十六進(jìn)制顏色編碼：

div {
color: #ff8000;
}

提示

避免混合頻譜相同的顏色。對于基準(zhǔn)色#3bafdA——位于可見光譜藍(lán)色光的范圍之內(nèi)，通過與一種對立的顏色進(jìn)行混合我們將得到一種比較滿意的結(jié)果，比如說中紫羅蘭紅或者淺海綠色：

@color-base : #3bafdA;
@color-primary : mix(@color-base, mediumvioletred);
@color-secondary : mix(@color-base, lightseagreen);
@color-tertiary : mix(@color-base, mintcream);

這給了我們一個可愛的配色方案，所有生成的顏色由于繼承相同的色調(diào)#3bafdA而顯得非常和諧。

假如你對色彩一無所知，你可以挑選一種你最喜歡的顏色，通過mix()函數(shù)與其他任何一種顏色進(jìn)行混合，結(jié)果可能令你大吃一驚。

以下有一個采用混合色得到的結(jié)果進(jìn)行手機(jī)原型設(shè)計(jì)的例子：

顏色的色調(diào)和飽和度

讓我們研究一些其他的配色方法。

明暗度

明暗度定義了一種顏色明與暗的程度。在網(wǎng)頁設(shè)計(jì)中，明暗度一般用來區(qū)分元素的狀態(tài)。舉個例子，一個按鈕，可能在:hover時是較淺的顏色，在:focus時是較深的顏色。在LESS里，我們就可以分別使用函數(shù)darken()和lighten()使一種顏色深一點(diǎn)或者淺一點(diǎn)。

@color-base : #3bafdA;
@color-hover : lighten(@color-primary, 10%); //#9c84c1
@color-focus : darken(@color-primary, 10%); //#684b94

結(jié)果是：

飽和度

或者，我們可以調(diào)整顏色飽和度來代替明暗度。飽和度定義了一種顏色的深度。飽和度越大，顏色越亮麗，最低飽和度則會使顏色趨于灰色。

拿上面的例子來說，我們可以用saturate() 和 desaturate()函數(shù)來替換明暗度的函數(shù)，此外，還可以定義未激活狀態(tài)的顏色。

@color-base : #3bafdA;
@color-hover : saturate(@color-primary, 10%);
@color-focus : desaturate(@color-primary, 10%);
@color-disable : lightness(desaturate(@color-primary, 100%), 30%);

進(jìn)一步調(diào)整顏色的不飽和度，直到認(rèn)為它在你的設(shè)計(jì)背景中合適為止。

現(xiàn)在當(dāng)我們自定義按鈕樣式的時候，我們的變量色都是與基準(zhǔn)色緊密聯(lián)系的；當(dāng)基準(zhǔn)色改變的時候，它們都會進(jìn)行相應(yīng)的變化。

智能色彩輸出

LESS讓我們的樣式變得更智能。舉例來說，我們能讓我們的樣式自己“思考”并決定什么顏色在什么條件下適用。假設(shè)我們正在創(chuàng)建一個網(wǎng)站模板，這是按鈕的基本樣式，你打算用不同的顏色和風(fēng)格來擴(kuò)展它。但是我們怎樣控制顏色的輸出呢？我們當(dāng)然不希望深色的文字在深色的背景上，反之亦然。我們需要確保文本保留對比，以便于閱讀，這樣，contrast()函數(shù)就派上用場了。

@body-bg: #000;

body {

color: contrast(@body-bg);
}

在上面的例子中，我們通過contrast()函數(shù)來設(shè)置顏色。這樣確保文本顏色與背景顏色有足夠的反差。在這種情況下，由于背景顏色是#000,文本顏色應(yīng)該返回#fff。如果你設(shè)置背景色為淺色，比如說白色，煙白，或者天藍(lán)色，文本顏色應(yīng)該返回#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 混合閉包內(nèi)封裝background聲明。

@bg: transparent;
.element {
& when not (@bg = transaprent) {
background: @bg;
}
}

你也可以為border屬性和color屬性作同樣的聲明，并通過刪除不必要的規(guī)則在你的樣式表里只保留幾行代碼。你同樣可以在聲明border與color屬性時做同樣的事，并只保留一些必要的代碼。

結(jié)束語

我希望我介紹的某些函數(shù)能幫助你在設(shè)計(jì)中提升配色能力。你可以在LESS官網(wǎng)上上找到完整的函數(shù)清單，并試驗(yàn)它。我非常同意Kezz Bracey的說法。配色的唯一方法就是反復(fù)的試驗(yàn)。

“直到我通過反復(fù)試驗(yàn)來開始創(chuàng)建可靠的配色方案，我所看過的所有色彩理論才開始變得有意義”

總結(jié)

以上是生活随笔為你收集整理的用Less定义常用的CSS3效果函数及常用颜色搭配（让CSS写起来更有趣）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。