less学习笔记

---

注释

以“//”的注释不会被编译到css中，以“/**/”会被编译到css中

/*
注释会出现在css文件中
*/

#wrap {
  // 不会出现在css中
  width: 100px;
  height: 100px;
}

/*
注释会出现在css文件中
*/
#wrap {
  width: 100px;
  height: 100px;
}

变量

@变量名：值

@color:yellow

作为选择器

#@{select}

作为url

URL:@{url}

延时加载：如下例使用时会等变量值改变完了在调用

@var:1;
.b{
	@var:2;
	three:@var;//3
	@var:3;
}

嵌套规则

基本嵌套

#div{
	width: 200px;
	.span{
	
	}
}

&的使用,&符号代表当前的父级

#div{
    width: 80px;
    height: 80px;
    // 给div添加hover
    &:hover{
        width: 100px;
    }
}

混合

普通混合

缺点：会编译到css中，使css体积变大

.juzhong{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}
#wrap{
	.juzhong;
}

等价于

#wrap{
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: aut
}

带默认值混合

less

.juzhong(@c:10px, @h){
	position: absolute;
	left: 0;
	right: 0;
	top: @h;
	bottom: @c;
	margin: auto;
}
#wrap1{
	.juzhong(100px, 100px);
}
#wrap2{
	.juzhong(100px);
}

css

#wrap1 {
  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
  bottom: 100px;
  margin: auto;
}
#wrap2 {
  position: absolute;
  left: 0;
  right: 0;
  top: 10px;
  bottom: 100px;
  margin: auto;
}

命名参数

less

.juzhong(@c:10px, @h){
	position: absolute;
	left: 0;
	right: 0;
	top: @h;
	bottom: @c;
	margin: auto;
}
#wrap{
	// 指定实参给谁赋值
	.juzhong(@h:100px);
}

css

#wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 100px;
  bottom: 10px;
  margin: auto;
}

匹配模式

less

.juzhong(L,@c:10px, @h){
	position: absolute;
	left: @h;
	right: @c;
	top: 0;
	bottom: 0;
	margin: auto;
}
.juzhong(R,@c:10px, @h){
	position: absolute;
	left: 0;
	right: 0;
	top: @h;
	bottom: @c;
	margin: auto;
}
#wrap{
	.juzhong(L,@h:100px);//匹配标识符为 L 的样式
}

less

.juzhong(@_){//传 @_ 表示每调用.juzhong就会自动调用,也就是自动加入标记为@_的属性
	position: absolute;
	margin: auto;
}
.juzhong(L,@c:10px, @h){
	left: @h;
	right: @c;
	top: 0;
	bottom: 0;
}
.juzhong(R,@c:10px, @h){
	left: 0;
	right: 0;
	top: @h;
	bottom: @c;
}
#wrap{
	.juzhong(L,@h:100px);//匹配标识符为 L 的样式
}

计算

#wrap{
    width: (50 + 50px);
    height: (100 + 100px);
}

继承

不支持参数

less

.box{
  &:extend(.back);
  background-color: aqua;
}
.back{
  width: 100px;
  height: 100px;
}
.back:hover{
  background-color: red;
}

css

.box {
  background-color: aqua;
}
.back,
.box {
  width: 100px;
  height: 100px;
}
.back:hover {
  background-color: red;
}

extend all

这样写.box会继承.back所有的属性

less

.box{
  &:extend(.back all);
  background-color: aqua;
}

.back{
  width: 100px;
  height: 100px;
}
.back:hover{
  background-color: red;
}

css

.box {
  background-color: aqua;
}
.back,
.box {
  width: 100px;
  height: 100px;
}
.back:hover,
.box:hover {
  background-color: red;
}

避免编译

这样就不会自动编译，识别为字符串，交给浏览器编译。

*{
    padding:~"cacl(100 + 50px)";
}

---

总结

less这一部分内容还是比较简单的，但是要是想熟练使用，而且还要用的好是需要下功夫的。