引入Less
语法:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
说明:
less.js文件必须在引入的less文件之后
引入less文件事rel的值必须为 stylesheet/less
变量
1. 变量声明
@变量名:变量值;
例1:@widht:100px;
例2:@length:100px;@lenght : @width+100px(+,-,*,/ 都可以)
2. 变量的使用
将变量名写在css属性后面即可
例:
@width:100px;
div{
width:@widht;
}
3. 变量的值参与计算
变量可以直接与 加,减,乘,除运算
例:
@width:100px
@width+100px ;结果为200px
@width*2; 结果为200px
4. 作用域(scope)
作用域是程序中的一个标准,LESS中也是。
- 定义在root级的变量(全局变量),在整个文档中都是有效。
- 定义在选择器,比如id或者class中的变量(局部变量),只在该选择器中有效;
如果局部变量和全局变量名称相同时,则局部变量优先级高,将替代全局变量。
@color: #00c; /* 蓝色 */
. header {
@color: #c00; /* 红色 */
border: 1px solid @color; /* 红色边框 */
}
.footer {
border: 1px solid @color; /蓝色边框 /
}
类(函数)
1. 类的声明
通过 “.” +类名(参数列表){css申明}
说明:
“.”不能少必须加
类名和css类名命名规则相同参数列表和变量声明一样,可带默认值
css申明可以用参数也可用常量值
例:
.myClass(@color:red,@length){
background-color:@color
width:@length;
height:@length;
border:1px solid @color
}
2. 类的应用(函数的调用)
直接在css声明中调用类名并传入参数即可
说明:
“.”不能少
如果参数没有默认值则必须传入参数,如果都有默认值则可以不传入参数,直接写类名即可
例:
.myClass(@color:red ,@length:100px){
background-color:@color;
width:@length;
height:@length;
border:1px solid @color
}
.div1{
.myClass(grenn,200px);
}
.div1{
.myClass;
}
类声明的扩展
1. 以使用@arguments来引用所有传入的变量
例:
.border(@a,@b,@color:blue){
border:@arguments;
}
2. 相同类名的标识
使用参数的控制位来控制相同的类输出不同的样式
.border(cool,@color){
border:2px solid @color;
}
.border(hot,@color){
border:1px solid @color
}
.border(@_,@ye){
color:@ye;
}
调用:
.con2{.border(hot,red)}
.con1{.border(cool,blue)}
输出为:
.con2(border:1px solid red;color:red)
.con1{border:2px solid blue;color:blue}
3. 使用参数个数来控制输出那个类:
.border(@a){….}
.border(@a,@b){...}
如果传入一个参数则调用第一个定义,传入2个则调用第二个定义
4. 条件语句判断:
可以在类函数定义时候使用条件判断
.border(@a) when (@a>10),(@a<3){
border:@a solid blue;
}
.con1{.border(5px)}
这里的条件是大于10或者小于3,所以调用不成立
.border(@a) when (@a>10) and (@a<15){
border:@a solid blue;
}
.con1{.border(12px)}
这里的条件是大于10并且小于15 ,调用成立,条件语句中那个px可以加也可以不加,判断都通过
5. 以使用内置函数unit来增加或者取出单位
.border(@a) {
border:unit(@a,px) solid red;
}
调用:
.con2{.border(5)}
输出:
.con2{border:5px solid red;},如果写成unit(5px) 则去掉单位输出5
混合(Mixin)
有时,我们会创建一些样式,目的是在样式中重复使用这些样式规则。没有人会阻止你在一个HTML中使用多少个class,但是你可以使用LESS,在样式表中完成。为了说明这一点,我粘贴了一些代码示例: .border { border-top: 1px dotted #333; }
article.post {
background: #eee;
.border;
}
ul.menu {
background: #ccc;
.border;
}
选择器继承
下面这些是LESS中没有提供的。通过这个功能,你可以将一个选择器附加到已经预先定义的选择器上,而无需再使用逗号将两者分开的写法了:
.menu {
border: 1px solid #ddd;
}
.footer {
@extend .menu;
}
/* 上面的规则和下面的规则是一样的效果 */
.menu, .footer {
border: 1px solid #ddd;
}
嵌套规则(Nested Rules)
在CSS中嵌class和id是避免样式干扰或者被别的样式干扰的唯一方式。但是可能变得很乱。使用一个选择器,类似于”#site-body .post .post-header h2”是毫无用处,而且还占用大量没必要的空间。使用LESS,你可以嵌套ID、class以及元素标签。对于前面提到的例子,你可以这样写:
#site-body { …
.post { …
.post-header { …
h2 { … }
a { …
&:visited { … }
&:hover { … }
}
}
}
}
上面的代码最终效果和上面的一大串选择器效果一样,但是要更容易阅读和理解的多,而且它占用很少的空间。你也可以通过&来引用元素样式到他们的伪元素上,这个功能类似于javascript中的this。
命名空间(Namespaces)
命名空间可以用于组织我们的CSS,从而提高到另一个层次,我们将一些公用的样式创建分组,然后在使用的时候直接调用。例如,如果我们创建了一个名为“default”的样式分组,我们就可以在使用到的时候直接从该组中调用。
#defaults {
.nav_list () {
list-style: none;
margin: 0; padding: 0;
}
.button () { … }
.quote () { … }
}
然后,在我们的代码中,如果我们正好在一个nav元素中使用了ul元素,我们就会想到我们需要default样式。那么我们就可以简单的调用它,它也会被直接应用。
nav ul {
#defaults > .nav_list;
}
注解
这一部分比较基础。LESS中允许两种注释写法。标准的CSS注释,/* comment */,是有效的,而且能够通过处理并正确输出。当行注释,// comment,同样可以用但是不能够通过处理也不能被输出,然后,结果是,“无声的”。
导入 在less文件中导入外部less/css文件
导入也相当符合标准。标准的 @import ‘classes.less’; 处理的很好。然而,如果你想要导入其它的LESS文件,那么文件的扩展名是可选的,所以 @import ‘classes’; 也是可行的。如果你想要导入一些无需LESS处理的内容,你可以使用 .css 扩展 (比如, @import ‘reset.css’;)。
字符串插入
字符串也是可以用于变量中的,然后通过@{name}来调用。
@base_url = 'http://coding.smashingmagazine.com';
background-image: url("@{base_url}/images/background.png");