Less的使用
- Less只有编译后才能被浏览器使用
- Less的编译工具
- 考拉 http://koala-app.com/index-zh.html 将less和css文件放到同一文件夹
- WindowsLess http://winless.org/
- 支持延迟加载 放在顶部和末尾都无所谓
- 多定义一个变量多次时，只会使用最后一个 跟css一样之前的会被替换掉
- 文件引用 @import ‘main.less’
Less的基本用法 嵌套
- 子级可以层层嵌套替代css的层级写法
1
2
3
4
5
6
7.container{
width:100%;
height:100%;
.child{
font-size:0px;
}
} - less的注释要/* */ 否则不会编译到css中
Less的基本用法 变量
1
2
3
4
5
6
7
8//less
@40rem 数值和单位
@blue:#c3adc2
color:@blue
width: 480/@rem;(480/40)rem
//等价于css
color:#c3adc2
width:12rem作为url
1
2
3
4
5
6
7
8@myUrl:'www.baidu.com/static/images'
body{
background:url('@myUrl/logo.png')
}
//css
body{
background:url('www.baidu.com/static/images/logo.png')
}Less的混合
- 混合就是将一系列的属性重一个规则集引入到另一个规则集
1
2
3
4
5
6
7
8
9
10.ellipsis {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.text{
font-size:20px;
.ellipsis
} - 编译后
1
2
3
4
5
6.text{
font-size:20px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}不带输出的混合
- 想要创建一个混合集但是却不想让他输出到你的样式中去
- 实现方法 在不想输出的混合集后边加一个括号（）
1
2
3
4
5
6
7
8
9
10.color{
color: red;
}
.backround(){
background-color: pink;
}
.width{
.color;
.backround;
} - 编译后
1
2
3
4
5
6
7.color {
color: red;
}
.width {
color: red;
background-color: pink;
} - backround并没有编译到css中
带选择器的混合
1
2
3
4
5
6
7
8.color(){
&:hover{
border:1px solid red;
}
}
.width{
.color
} - 编译后
1
2
3
4.width:hover {
border: 1px solid red;
}带参数的混合
1
2
3
4
5
6.border-radius(@radius) {
border-radius: @radius;
}
.width{
.border-radius(4px)
} - 编译后
1
2
3.width {
border-radius: 4px;
}带默认值的混合
- border-radius(@radius:5px) 没传值得话就默认为5px
1
2
3
4
5
6.border-radius(@radius:5px) {
border-radius: @radius;
}
.width{
.border-radius
} - 编译后
1
2
3.width {
border-radius: 5px;
}@arguments
1
2
3
4
5
6.border(@x:solid;@c:red){
border:1px @arguments
}
.width{
.border
} - 编译后
1
2
3.width {
border: 1px solid #ff0000;
}
