less基本语法

---

• 可以使用变量 在顶部进行对颜色的添加和定义,在标签内可以通过对颜色的调用来添加颜色,

@color:#ccc;

header{

color:@color;

}
h3{
color:@color;
}

* 如何在页面中进行引用

    我们可以直接在客户端使用less(less源文件), 只需要从<http://lesscss.org/>进行下载.
> <link rel = "styleesheet/less" type="text/css" herf = "styles.less">

    LESS源文件的引用方式与标准的css文件引入方式一样

>  <Link res="stylesheet/less" type="text/css" href="fileName.less">

     rel的属性要设置为"stylesheet/less" 还有更重要的一点 需要注意的就是你的样式文件引用一定要在less(less.js)文件的引用之前,保证less源文件能够正确的解析编译.

* LESS文件 清单

  ```
@width: 100px;
#home {
  @width:300px;
  #div{
      width:@width;
  }
}
#leftDiv{
  width:@width;
}

@width相当与一个变量,当出现当前变量时,会在当前作用域中寻找当前变量.一直寻找到最高级的变量,如果没有就会报错. 

---

• Mixins

  Mixins其实是一种嵌套,它允许将一个嵌套入到另外一个类中使用,被嵌套的类可以当作变量,Mixins其实是规则级别的复用.
  

• 用less写出来的结构像是html的DOM树的结构.

<div id="home">
<div id="top">top</div>
<div id="center">
<div id="left">left</div>
<div id="right">right</div>
</div>
</div>

以上是DOM树的结构 - - -  以下是less的文件结构  两种结构特别相似.能够清晰的编写和维护代码.增加代码的可读性.

home{

color : blue;
width : 600px;
height : 500px;
border:outset;

top{

    border:outset; 
    width : 90%; 

}

center{

    border:outset; 
    height : 300px; 
    width : 90%; 
    #left{ 
      border:outset; 
      float : left; 

width : 40%;
}
#right{
border:outset;
float : left;
width : 40%;
}
}
}

___

* 还可以引入一个属性集合

.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}

       那么我们 就可以在其他的class中引入这个属性集合了.像调用函数那样去调用这个属性集合

.post a {
color: red;
.bordered;
}

  这样在**a**标签中就可以调用.bordered这个属性的所有的属性.而.bordered就像是一个可以调用的函数一样,拥有这两个属性了..