less和sass就是使用其他工具将某种格式的文本重新编译成css文件,好处在于方便工程管理、避免写大量的重复内容和利于维护。我们常常使用的方式是:写好less后在本地编译后使用编译后的css文件,虽然sass和less能做到请求时进行编译,但是会带来额外的开销,所以我们一般会本地进行编译,以下内容能让你在两个小时内迅速掌握less的使用。
设置less的字符编码方式
@charset 'utf-8';
调用其它已有的less文件(三种方式)@import url('back.less');
@import 'back.less';
@import 'back';
使用变量
@bgcolor: #ab0;
body{
background-color: @bgcolor;
}
需要说明的是:为了以后维护和修改的方便,我们一般将变量写在各个文件的开始位置。
简单混合的使用
<div></div>
@bordercolor: #ab0;
.border{
border: 1px solid @bordercolor;
}
div{
width: 300px;
height: 300px;
.border;
}
就是在其他选择器中调用已经有的类选择器。
在混合中调用不同的参数
在调用时传入不同的值就会得到不同的样式,遇到使用多个值的情况使用","隔开
.border(@bordercolor){
border: @border solid 1px;
}
div{
width: 300px;
height: 300px;
.border(red);
}
当然有有多层混合使用的情况
.border(@bordercolor){
border: solid 1px @bordercolor;
}
.mix{
.border(#ab0);
}
在混合中使用默认值
.border(@bordercolor: #ab0){
border: @bordercolor;
}
div{
....
.border();
}
使用默认值的混合类虽然可以直接使用.border调用,但是不建议这样使用,语义上是不明确的。只要文件中存在.border{},不管有没有带参数和.border(){}是相同的,这时我们调用时要使用.border();明确自己使用的是什么,如果即有.border{},又有.border(){}最好将.border(){}写在.border()后面,就是使用层叠。由于.border(){}编译后不会以直接形式存在于最终文件中,所以使两种写法都会有效。
匹配模型
我们要在工程中使用各种方向的三角形
@trianglecolor: #ab0;
/* 向上的三件形 */
.triangle(top,@width,@color){
border-width: @width;
border-color: transparent transparent @color transparent;
border-style: dashed dashed solid dashed;
}
/* 向右的三角形 */
.triangle(right,@width,@color){
border-width: @width;
border-color: transparent transparent transparent @color ;
border-style: dashed dashed dashed solid;
}
/* 向下的三角形 */
.triangle(bottom, @width, @color){
border-width: @width;
border-color: @color transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
/* 向左的三角形 */
.triangle(left, @width, @color){
border-width: @width;
border-color: transparent @color transparent transparent;
border-style: dashed solid dashed dashed;
}
span{
height: 0;
.triangle(left,10px,@trianglecolor);
}
在span中我们在.triangle(top,...)调用不同的朝向就是不同的三角形。
假如你自己写了以上代码,会出现梯形而不是三角线,这是因为浏览器会有默认元素的宽和高。我们要将每一个朝向都添加清除浏览器默认显示,难道每一个都再写一遍吗?
.triangle(@_, @width, @color){
display: block;
padding: 0;
width: 0;
overflow: hidden;
}
这样写的目的就是当在调用时,都默认调用一次样式,就解决了上面的问题。
使用运算符
div{
width: 100px;
height: 100px - 20;
background: #abc;
}
实际上在less中内置了很多函数,这里就不再介绍。
嵌套使用
<body>
<ul>
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
<li>项目四</li>
<a href="#">1234</a>
</ul>
</body>
ul{
width: 300px;
margin: 0 auto;
margin-top: 30px;
list-style: none;
background-color: #ab0;
li{
margin-top: 5px;
background-color: #ccc;
/* 相当于ul li:hover{} */
&:hover{
background-color: #def;
}
}
a{
color: #191919;
font-size: 16px;
text-decoration: none;
&:hover{
background-color: red;
}
}
}
特别注意&:的方便使用使用arguments一组参数使用
很多css样式要调用一组样式,为了方便调用我们使用arguments
.border(@width:1px,@color:red,@style:solid){
border: @arguments;
}
使用~告诉编译器不要编译该部分内容
div{
width: ~'cale(300-20s)';
}
使用!importan
t
!important和css中使用是一样的
div{
.border() !important;
}