iqszlong

最近才有时间去看less的一些东西，本以为不依靠翻墙是找不到网站的，没想到淘宝UED已经做了less的中文主页了。

主页地址:http://www.lesscss.net/

less.js的使用方式很简单，只要保证样式文件类型是.less文件结尾,然后在less.js引用之前就可以生效。

<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>

不过这个在开发的时候可以不用这样弄的，这样最后会增加页面的负载。所以能简单点只要生成的.css文件就可以了。less网站其实已经提供了相关工具了simpless。
这个工具可以将项目中的所有less文件生成压缩版的css文件，只需要将项目的目录拖拽进去就能自动读取到里面的less文件了，同时还包含less文件的状态。只要做出修改就会有相应提示重新生成css文件，相当好用！

好了，接下来说下less文件怎么写。以下这段代码是box.css文件中的片段，将文件名称改为box.less
就先从最简单的开始改吧

/* 1.5 导航
-----------------------------------------*/
.blue_style .nav {
  background:#537bcc url(../img/style/nav_bg.jpg) no-repeat center top;
  border-top:1px solid #7296d8;
  border-bottom:1px solid #7296d8;
}
/* 导航间隔线 */
.blue_style .nav ul li.line {
  display:block;
  height:30px;
  width:0;
  font-size:0;
  border-left:1px solid #446ac1;
  border-right:1px solid #7fa2dd;
}
/*导航链接*/
.blue_style .nav li a {
  min-width:85px;
  font-weight:bold;
  margin:-1px 0;
  border:1px solid #5D8AD2;
}
.blue_style .nav li a:hover {
  z-index:1;/* border-color: #95C3ED;*/
  border-color:#95C3ED;
  background:#7498d9 url(../img/style/nav_ul_hover.gif) no-repeat center center;
  box-shadow:0 0 3px rgba(149,195,237,0.8);
}
.blue_style .nav li a:active {
  background:#2F549F;
  border-color:#446AC1;
}
.blue_style .nav li a.selected,
.blue_style .nav a.selected:hover,
.blue_style .nav a.selected:visited{
  background:#fff url(../img/style/nav_ul_selected.gif) no-repeat center center;
  color:#2F549F;
  border-color:#fff;
  box-shadow:0 0 3px rgba(255,255,255,0.5);
}

一步一步来.blue_style .nav可以改成下面这样子的，看起来就像是html的div嵌套

/* 1.5 导航
-----------------------------------------*/
.blue_style {
  .nav {
    background:#537bcc url(../img/style/nav_bg.jpg) no-repeat center top;
    border-top:1px solid #7296d8;
    border-bottom:1px solid #7296d8;
  }
}

解释成html代码类似于下面这样，是一种包含关系

接着改,由于里面有更加深的包含关系 所以可以在nav中包含一层ul li.line

/* 1.5 导航
-----------------------------------------*/
.blue_style {
  .nav {
    background:#537bcc url(../img/style/nav_bg.jpg) no-repeat center top;
    border-top:1px solid #7296d8;
    border-bottom:1px solid #7296d8;
    /* 导航间隔线 */
    ul li.line {
      display:block;
      height:30px;
      width:0;
      font-size:0;
      border-left:1px solid #446ac1;
      border-right:1px solid #7fa2dd;
    }
  }
}

然后看下面的代码.blue_style .nav li a发现有必要改造一下现在的结构，注意.line前面的”&”符号是代表并列关系而不是包含关系。

/*1.5 导航
-----------------------------------------*/
.blue_style {
  .nav {
    background:#537bcc url(../img/style/nav_bg.jpg) no-repeat center top;
    border-top:1px solid #7296d8;
    border-bottom:1px solid #7296d8;
    ul li{
      /* 导航间隔线 */
        &.line {
          display:block;
          height:30px;
          width:0;
          font-size:0;
          border-left:1px solid #446ac1;
          border-right:1px solid #7fa2dd;
      }
    /*导航链接*/
    a{
      min-width:85px;
      font-weight:bold;
      margin:-1px 0;
      border:1px solid #5D8AD2;
      }
    }
  }
}

继续改

/* 1.5 导航
-----------------------------------------*/
.blue_style {
.nav {
  background:#537bcc url(../img/style/nav_bg.jpg) no-repeat center top;
  border-top:1px solid #7296d8;
  border-bottom:1px solid #7296d8;
    ul li{
    /* 导航间隔线 */
      &.line {
        display:block;
        height:30px;
        width:0;
        font-size:0;
        border-left:1px solid #446ac1;
        border-right:1px solid #7fa2dd;
      }
    /*导航链接*/
    a{
      min-width:85px;
      font-weight:bold;
      margin:-1px 0;
      border:1px solid #5D8AD2;
        &:hover{
          z-index:1;/* border-color: #95C3ED;*/
          border-color:#95C3ED;
          background:#7498d9 url(../img/style/nav_ul_hover.gif) no-repeat center center;
          box-shadow:0 0 3px rgba(149,195,237,0.8);
        }
        &:active {
          background:#2F549F;
          border-color:#446AC1;
        }
        &.selected, &.selected:hover, &.selected:visited {
          background:#fff url(../img/style/nav_ul_selected.gif) no-repeat center center;
          color:#2F549F;
          border-color:#fff;
          box-shadow:0 0 3px rgba(255,255,255,0.5);
        }
      }
    }
  }
}

这里可以看到，我们活用了css的”,”特性,用官方的解释就是

LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上

最后要注意的是有关css代码ie滤镜filter属性，less文件是不认识的，所以生成的时候会报错。在这里已经有相应的处理方式在属性值加上”~”符号再用引号包含起来，这样就让less直接输出了。

变量和什么的后期有时间再做细致分析