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就像是一个可以调用的函数一样,拥有这两个属性了..
