less

less的简介
  • less是一门css的预处理语言
  • less是一个css的增强版，通过less可以编写更少的代码实现更强大的样式
  • 在less中添加了许多的新特性，对变量的支持，对mixin 的支持等
  • less语法大体上和css语法一致，但是less中增添了许多对css的扩展
  • 浏览器无法直接执行less代码，要执行必须将less转换为css，然后再由浏览器执行
CSS兼容性不好的地方( 部分浏览器无法使用 )
  • 创建三个盒子box$*3 ( $表示任意值 )
  • CSS原生也支持变量的设置 ( 可以同时改变所有变量 )
html{
	--color: #bfa;
	--length:100px;
}
.box{
	width: var(--length);
	background-color: var(--color);
}
  • calc() 计算函数，例如：width: calc(200px*2);
less语法
变量：
  • 在变量中可以存储一个任意的值
  • 并且我们可以在需要时，任意的修改变量中的值
  • 变量的语法： @变量名
  • 以下是less的使用
/*less的使用*/
@a:200px;
@b:#bfa;
@c:box1;

.box{
	/*如果是直接使用则以 @变量名 的形式使用即可*/
	width: @a;
	color: @b;
}

/*如果作为类名，或者一部分值使用时必须以 @{ 变量名 } 的大括号形式使用*/
.@{c}{
	width: @a;
	backgroud-image: url("@{c}/1.png")
}

@d:200px;
@d:300px;
div{
	/*变量发生重名时，会优先使用比较近的变量*/
	@d:100px;
	width:@d;
	height:@e;
}
/*可以在变量声明前就使用变量*/
@e:100px;

div{
	width:300px;
	/*可以用$得到width的值*/
	height; $width;
}
父元素（使用&）
.box{
	.box1{
		color:red;
	}
	/*	为box设置一个hover
		& 就表示外层的父元素
	*/
	&:hover{
		color:blue;
	}
}
扩展 extend ()
/* extend( ) 对当前选择器扩展指定选择器的样式( 选择器分组 )*/
.p1{
	width:100px;
	height:200px;
}
.p2:extend(.p1){
	color: red;	  /*p2的样式会比p1多一个红色字体*/
}


.p3{
	/*直接对指定的样式进行引用，这里就相当于将p1多样式在这里进行了复制*/
	/* mixins混合 */
	.p1()
}


/*使用类选择器时可以在选择器后面添加一个括号，这时我们实际上就是创建了一个mixins*/
.p4(){
	width:100px;
	height:100px;
	background: red;
}
.p5{
	.p4;	/*p4的所有样式复制给p5,且p4不出现*/
}
混合函数
  • 在混合函数中可以直接设置变量
.test(@w,@h,@bg-color){ /* 可以在@变量名后设置默认值 */
	width: @w;
	height: @h;
	background-color: @bg-color;
}

div{
	/*调用混合函数，按顺序传递参数*/
	.test(200px,300px,#bfa)
}
less的补充
  • 在less中所有的数值都可以直接进行运算
width: 100px + 100px;
  • 可以通过import来将其他的less引入到当前的less中（实现模块化处理）