1.less官方网站:
英文:http://www/lesscss.org/
中文:http://www.lesscss.net/
2.less.js下载:
一.输入网址:http://www.lesscss.net
二.点击更新日志
三.点击less.js
四.点击右边的download zip
五.在下载到的文件夹里找到压缩包
六.点开找到less文件,dist/less
七.将less.min.js复制到项目文件里
八.在项目主页中引入:
如果不引入less.min.js的话,css将无任何效果
3.less变量(跟sass用法类似)
一.普通的变量
@width: 10px;
@height: @width + 10px;
#header {
width: @width;
height: @height;
}
编译为:
#header {
width: 10px;
height: 20px;
}
二.作为选择器和属性名
使用时变量以@(变量名)的方式使用
三.作为URL
4.混合
混合(Mixin)是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
如果我们希望在其它规则集中使用这些属性,我们只需像下面这样输入所需属性的类(class)名称即可,如下所示:
#menu a {
color: #111;
.bordered();
}
.post a {
color: red;
.bordered();
}
.bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了
5.Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力。
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
用 Less 语言我们可以这样书写代码:
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
使用此方法将伪选择器(pseudo-selectors)与混合(mixins)一同使用:
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
yanghongyan001
发布了4 篇原创文章 · 获赞 0 · 访问量 55
私信
关注