less
Less编译工具
- koala 官网:www.koala-app.com
less中的注释
- 以//开头的注释,不会被编译到css文件中
- 以/**/包裹的注释会被编译到css文件中
less中的变量
- 使用@来申明一个变量
- 语法: @变量名
- 作为普通属性值只来使用: 直接使用@pink
- 语法: @变量名: 值;
- 使用:@变量名
- 定义方法:
@pink:pink
=> 使用:@pink
- 作为选择器和属性名:@{selector的值}的形式
- 语法: @变量名: 选择器 或者 属性名
- 使用: @{变量名}
- 定义方法:
@m:margin
=> 使用:@{m}
- 作为URL:@{url}
- 变量的延迟加载
less中的嵌套规则
- 基本嵌套规则
- 都是包含关系
&
的使用- & 表示上面一个类名
less中的混合
- 混合就是将一系列属性从一个规则集引入到另一个规则集的方式
普通混合,不带输出的混合
- 语法:点名称+括号
.名称()
,这里不加括号,就会编译到css文件中,所以这里需要加上括号 - 使用:直接点名称
.名称
不需要加括号
带参数的混合
- 语法:点名称(参数1,参数2,参数3) [参数的写法和定义变量一样,使用也一样]
- 例如:.centet(@w,@h){widht:@w;height:@h}
- 说明:形参有多少,实参就要写多少,少些一个都不行
带参数并且有默认值的混合
- 语法:点名称(参数1:默认值,参数2:默认值,参数3:默认值)
- 说明:有默认值,可以不用传参数,如果要传:一次传递,不能后面参数传,前面的不传;但是可以前面传,后面不写默认;不能前面默认后面传;
命名参数
- 语法:点名称(参数1:默认值,参数2:默认值,参数3:默认值)
- 使用:点名称(参数3:传递值);
- 说明: 指定传递值,但是要写上参数名称;
匹配模式
- 语法:在形参前面添加一个字符串,调用的时候需要选择匹配的那个字符串就可以了不同选择
- 例如定义:
.position(t,@w,@h){position:top; widht:@w;height:@h;}
.position(r,@w,@h){position:right; widht:@w;height:@h;}
.position(b,@w,@h){position:bottom; widht:@w;height:@h;}
.position(l,@w,@h){position:left; widht:@w;height:@h;} - 使用:
.position(t[说明:这里选择那个,就会匹配那个],10,20)
@_
说明:在匹配模式中,有相同的样式,可以提取出来,放在一个和匹配模式相同的名称,需要参数,参数写(@_); 在执行匹配模式的类名时,会制动执行公共部分带@_
的这个相同名称- 例如
.position(@_){color:#fff;font-size:2px;}
.position(t,@w,@h){position:top; widht:@w;height:@h;}
.position(r,@w,@h){position:right; widht:@w;height:@h;}
.position(b,@w,@h){position:bottom; widht:@w;height:@h;}
.position(l,@w,@h){position:left; widht:@w;height:@h;} - 使用
.position(t,10,20); //position(@_)这个里面会自动添加到这个里面来
arguments变量
- 语法: @arguments
- 定义: .border(@1,@2,@3){border:@arguments}
- 说明: 专递的参数会自动替换到@arguments这里;参数随意写,不影响
- 使用: .border(1px,solid,black);
less运算
在less中可以进行加减乘除的运算
less避免编译
- 波浪号+引号引起来,表示原来格式输出
- 例如: *{margin: 100 * 10px;padding: ~"cacl(100px + 100)";}
- 输出为:* {margin: 1000px;padding: cacl(100px + 100);}
less继承
- 使用extend() 函数
- 例如:
#asd{ &:extend(.a all){代码块}
- 说面: 后面加all 表示继承a中的所有状态,包括伪类
- 便以为: .a,#asd{代码块}
性能比混合高
灵活度比混合低