less给网站换肤

LESSCSS是一种动态样式语言，属于CSS预处理语言的一种，它使用类似CSS的语法，为CSS的赋予了动态语言的特性，如变量、继承、运算、函数等，更方便CSS的编写和维护。

LESSCSS可以在多种语言、环境中使用，包括浏览器端、桌面客户端、服务端。

根据less可以预处理css语言的这一特性，就可以想到less可以实现一种功能，即“换肤”功能。

---

我最近做的网站就需要“换肤”功能，那当然我就采取less咯。
我主要就用到了less中的部分语法，变量以及一些函数
想要了解更多可以查看http://www.1024i.com/demo/less/index.html
简单介绍less用法以及使用：

1. 变量

@background: #e2e9f9;
 #top {
     background: @background;
 }
 编译为：
 #top {
    background: #e2e9f9;
 }

2.嵌套规则

 @color:red;
 @fontSize:12px;
 #top {
     color: @color;
     h1 {
        font-size: @fontSize;
    }
 }
 编译为：
 #top {
     color: red;
 }
 #top h1 {
     font-size: 12px;
 }

3 . 运算
任何数字、颜色或者变量都可以参与运算.

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

4.混合

.rounded-corners (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

#header {
    .rounded-corners;
}
编译为：
#header {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

5.函数
Less 内置了多种函数用于转换颜色、处理字符串、算术运算等

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
    color: (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
}
#footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, 10%);//降低一定数值的颜色饱和度。
}
编译为：
#header {
    color: #333;
    border-left: 1px;
    border-right: 2px;
}
#footer {
    color: #114411;
    border-color: #7d2717;
}

一些颜色运算：
saturate(@color, 10%);  //增加一定数值的颜色饱和度。
desaturate(@red, 10%);  //降低一定数值的颜色饱和度。
lighten(@color, 10%);   //增加一定数值的颜色亮度。
darken(@color, 10%);    //降低一定数值的颜色亮度。
fadein(@color, 10%);    //降低颜色的透明度（或增加不透明度）
adeout(@color, 10%);    //增加颜色的透明度（或降低不透明度）
ade(@color, 50%);   //给颜色（包括不透明的颜色）设定一定数值的透明度。

下面主要介绍我是如何利用less给网站换肤的

1. 编写less库，取名为xxx.less
   主要是改变背景色和字体颜色，把需要改变的元素都提取出来，写成一个函数，方便调用，定义背景色和字体颜色两个变量，变量分别有一个默认值。

@charset 'utf-8';
.change(@background: #e2e9f9,@color: #337ab7){

        background: @background;
        #daohang/* ,#ul */ {
            background: @background;
        }
        #ul li a:hover{
            color:saturate(@color,20%);
        }
        #column h3  {
            color: @color;
            & span {
                color: @color;
            }
        }
        .top{
            color: @color;
            border-top-color: @color;
            & .btn{
                background: @color;
            }
        }
        #contentList ul li span,.moreBtn {
            background: @color ;
        }
        .titleH2,.back{
            background: fadeout(@color,30%);
        }
        .footer{
            background: darken(@color, 10%);
        }
}

2.设置几个皮肤样式，存储成xxx.less文件
在开始引入库文件，语法为import url(xxx.less),然后分别给不同的皮肤设置不同的颜色，调用change函数，第一个参数是背景色，第二个参数是字体颜色，style是要给body添加的类名，根据后台传过来的皮肤类型，调用相应的class属性，皮肤类型用0,1,2…表示，所以给bodyclass类添加相应的名称style0，style1，style2…

@charset "utf-8";
@import url(xxx.less);
.style0{
    .change();  //默认  经典蓝
}
.style1{
    .change(#f5e2c9,#9f754d);   //咖啡棕
}
.style2{
    .change(#e5d3ed,#b88bcb); //紫色
}

document.body.className='style'+datas.skin;//datas.skin表示获取的皮肤类型

代码部分就是这些，当然还差引入文件的步骤，在head里面引入设置皮肤的.less文件,然后还需引入编译less的js文件,点击下载less.js
注意：less.js文件一定要放在你写的.less文件下面,并且.less的type类型是type=”text/less”

当然这种方法是在线编译成css，所以可能性能不是很好，一可以先编译成css文件放入到项目中再发布，这样只需在head标签内引入css文件即可.

好了，这些步骤进行完了，换肤的功能也就大概就实现了，想要性能更好一些可以把皮肤存入缓存，下一篇将介绍H5的本地存储功能。