less正如其名,起到的作用是写的更少,其与css的关系在我看来可看成是jquery之与JavaScript的关系。
less可以在node和浏览器端运行,相关的运行方法可以看less官方文档,我在编译的时候是用koala这个软件来编译的。实际上less只是为了方便编写,真正使用时还是使用css文件。
将文档拖入后右键点击文档可设置输出路径
接下来只要在less文件上编写,就可以修改输出路径的文档,即真正要使用的css文件。
接下来正式说less的内容
变量
基本使用
在less中,可以使用变量来标记某个样式属性,用法非常简单,less中的变量是用@开头的
@it_color:rgb(255,0,0);
.it{
color: @it_color;
}
上面的less代码会编译成下面的css代码
.it {
color: #ff0000;
}
看起来好像写多一行比较麻烦,但实际上,如果要总是重复地使用一个相同的样式,将其赋值给一个变量,在修改的时候会更加方便。
@block_color:rgb(255,0,0);
.block1{
color: @block_color;
}
.block2{
color: @block_color;
}
.block3{
color: @block_color;
}
.block4{
color: @block_color;
}
像上面的代码,如果我们要修改其中的color样式,在之前的css中,我们要对其一个一个地修改,但使用了less之后,我们只要修改其中的变量@block_color就可以了。
运算
在less中,变量是可以进行运算的
@test_width:200px;
div{
width: @test_width+200px;
}
上面的less代码会编译成下面的css代码
div {
width: 400px;
}
事实上,在运算中只要变量写了单位,参与运算的值可以不写单位,如果写了其他单位,也会按变量的单位编译。
@test_width:200px;
@test_height:200px;
div{
width: @test_width+200;
height: @test_height+200em;
}
上面的less代码会编译成下面的css代码
div {
width: 400px;
height: 400px;
}
如上面代码,不管参与运算的值没写单位,或是写了另外的单位em,最后都是按变量的单位px来编译的。而相反,如果变量没写参数,那么就是按参与运算的单位来编译。
@test_width:200;
@test_height:200;
div{
width: @test_width+200px;
height: @test_height+200em;
}
上面的less代码会编译成下面的css代码
div {
width: 400px;
height: 400em;
}
除了宽高之外,颜色其实也能进行加减,但是很不常用,所以这里就不写出对应代码了。
嵌套
嵌套是less中一个很有用的内容,可以对选择器进行嵌套,和html的嵌套是一样的。
假如现在有下面的html结构
<li>列表
<a href="">链接</a>
<span>提示</span>
</li>
我们要给这三个标签的字体使用不同的颜色,按以前的写法要一个一个写,而在less中,可以使用嵌套的写法。
li{
color: black;
a{
color: red;
}
span{
color: blue;
}
}
上面的less代码会编译成下面的css代码
li {
color: black;
}
li a {
color: red;
}
li span {
color: blue;
}
可以看出使用less的写法写出来更加明确嵌套的关系。除此之外,嵌套一个很方便的用法是用于伪类选择器的编写。一般在写伪类时我们要写两次选择器,而使用嵌套,可以使用&来将伪类嵌套在对应选择器内。(&代表上一层选择器)
a{
color: black;
&:hover{
color: red;
}
}
上面的less代码会编译成下面的css代码
a {
color: black;
}
a:hover {
color: red;
}
混合
基本使用
less中可以将一个选择器的样式作为另一个选择器的样式,只要直接将该选择器写入另一个选择器的花括号中即可。
.outer_border{
border: 1px solid rgb(0,0,0);
}
.outer{
width: 200px;
height: 200px;
.outer_border;
}
上面的less代码会编译成下面的css代码
.outer_border {
border: 1px solid #000000;
}
.outer {
width: 200px;
height: 200px;
border: 1px solid #000000;
}
当然除了类选择器外,id选择器同样可以,只要把“.”换成“#”即可。但是不能直接使用标签的选择器,如下代码会在编译时报错。
.outer{
width: 200px;
height: 200px;
div;
}
带括号的混合
如果想把一个选择器的样式混入另一个选择器,又不想该选择器被编译出来,可以在该选择器后面添加括号。
.outer_border{
border: 1px solid rgb(0,0,0);
}
.outer_color(){
color: red;
}
.outer{
.outer_border;
.outer_color;
}
上面的less代码会编译成下面的css代码
.outer_border {
border: 1px solid #000000;
}
.outer {
border: 1px solid #000000;
color: red;
}
可以看到,虽然将.outer_color的样式混入了.outer,但是.outer_color并没有被编译出来。事实上,在其后添加括号使其不被编译出来并非括号最常用的方法,最常用的是在括号内传入参数。
带参数混合
.outer_style(@color){
width: 100px;
height: 100px;
color: @color;
}
.outer{
.outer_style(red);
}
上面的less代码会编译成下面的css代码
.outer {
width: 100px;
height: 100px;
color: #ff0000;
}
如上代码,在括号内写入形参@color,在括号内调用该参数@color,在使用时只要在括号内写入样式对应要使用的值即可。通过这种写法,如果我们对于几个元素要使用一些相同的样式,有一些不同,这样写是很方便的。如上面代码中,就可以使几个元素的宽高相同,只是通过传入不同的color使颜色不同,不用多次写出width和height。
多参数混合
当然,参数可以不止一个,在传入多个参数时,参数之间用“;”或“,”隔开,调用时传入的值也是用“;”隔开。
.outer_style(@width;@height;@color){
width: @width;
height: @height;
color: @color;
}
.outer{
.outer_style(100px;200px;red);
}
上面的less代码会编译成下面的css代码
.outer {
width: 100px;
height: 200px;
color: #ff0000;
}
上面的代码传入多个参数给.outer_style,在调用该选择器样式时也传入了三个参数。
默认参数混合
在带参数的混合中,如果我们希望有的参数默认为一个值,只有在传入准确的值时才变为另一个值,那就可以使用默认参数混合。默认参数混合的形式和ES6中的函数默认参数类似,都是在“声明”的时候在参数位置写出默认值得,不同的是ES6的函数默认参数是用=,而less中是用:。
.outer_style(@width;@height;@color:black){
width: @width;
height: @height;
color: @color;
}
.outer{
.outer_style(100px;200px);
}
上面的less代码会编译成下面的css代码
.outer {
width: 100px;
height: 200px;
color: #000000;
}
可以看到,上面代码中.outer_style需要传入三个参数,而调用时只传入了两个参数,最后的color使用了@color的默认值black(#000000)。
@arguments参数
@arguments参数类似于JavaScript中函数的arguments参数,可以获得所有的参数.
outer_border(@width;@style;@color){
border: @arguments;
}
.outer{
.outer_border(1px, solid, black);
}
上面的less代码会编译成下面的css代码
.outer {
border: 1px solid #000000;
}
如上面代码,在调用.outer_border时传入了三个参数,而使用@arguments时就将三个参数赋给了border了。
@rest参数
同样类似于ES6中的rest参数,less中的@rest参数可以获得后面未被获取的值。
.outer_border(@width;@height;@rest...){
width: @width;
height: @height;
border: @rest;
}
.outer{
.outer_border(100px;100px;1px;solid;black);
}
上面的less代码会编译成下面的css代码
.outer {
width: 100px;
height: 100px;
border: 1px solid #000000;
}
可以看到,100px被显式赋值给@width和@height,而后面传入的值直接给了@rest,所以最后border样式的值为后面传入的那三个参数。
要注意的是,@rest...要写在最后面
模式匹配
less可以通过传入一个值给同名的混合选择器来决定使用哪些样式
.border(out){
border-width: 200px;
}
.border(in){
border-width: 100px;
}
.border(@_){
border-style: solid;
border-color:black;
}
.out{
.border(out);
}
.in{
.border(in);
}
上面的less代码会编译成下面的css代码
.out {
border-width: 200px;
border-style: solid;
border-color: black;
}
.in {
border-width: 100px;
border-style: solid;
border-color: black;
}
如上面代码,.out传入了out,所以找到了对于border第一个参数为out的样式,in也对应找到了样式,而对于不管传入什么参数都需要的样式,可以使用@_代替该位置。
混合的应用
兼容性处理
在使用css3的样式时,经常为了浏览器的兼容性处理,在样式前面加上前缀,每次都要添加显得很麻烦,如果在前面定义一个处理兼容性的混合,那就很方便了。
.border_radius(@radius){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius:@radius;
}
div{
.border_radius(5px);
}
上面的less代码会编译成下面的css代码
div {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
如上代码,只要先写好对应需要处理兼容性的样式,在使用该样式时只需对调用该混合选择器并传入参数,就可以节约很多时间了。