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的本地存储功能。