Less

注释
  • // 开头的注释,不会被编译到 css 文件中
  • / * * / 包裹的注释会被编译到 css 文件中
变量

使用 @ 来声明一个变量:@pink:pink;

  • 作为普通属性值直接使用:例:background: @pink;
  • 作为选择器和属性名:#@{selector的值}的形式
  • 作为URL:@{url}
  • 变量的延迟加载:等作用域中的所有东西解析完,再进行变量加载
  • 块级作用域
//less
@var: 0;
.class {
@var: 1;
	.brass {
		@var: 2;
		three: @var; // 3
		@var: 3;
	}
	one: @var; // 1
}
//css
.class {
	one: 1;
}

.class .brass {
	three: 3;
}

嵌套规则
  • 基本嵌套规则:父子集关系
  • & 的使用:平级关系
//css
.class{ }
.class .bro:hover { }

//less
.class{
	.bro { }
	&:hover { } 
}
混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

  • 普通混合:混合会编译到 css 文件中
  • 不带输出的混合:.class():{},该混合不会编译到 css 文件中
  • 带参数的混合:.class(@w, @h, @c):{}
  • 带参数且有默认值的混合:.class(@w: 10px, @h: 10px, @c: pink):{}
  • 带多个参数的混合
  • 命名参数:.class(@h: 10px, @c: pink):{}
  • 匹配模式
//在调用同名混合时,参数为 @_ 的混合会自动被调用
.triangle(@_, @w, @c){
    width: 0px;
    height: 0px;
    overflow: hidden; 
}

.triangle(L,@w,@c){
    border-width: @w;
    border-style:dashed solid dashed dashed;
    border-color:transparent @c transparent transparent ;
}
  • arguments 变量
计算
  • 加减乘除,一方带单位即可
继承
  • 性能比混合高
  • 灵活度比混合低
//less
.class {
	position: absolute;
	left: 0;
	right: 0;
	top: 0
	bottom: 0;
	margin: auto;
}

#wrap {
	position: relative;
	.inner {
		&:extend(.class);
		&:nth-child(1) {}
		&:nth-child(2) {}
	}
}

//css
.class,
#wrap .inner,
#wrap .inner:nth-child(1),
#wrap .inner:nth-child(2) {
	position: absolute;
	left: 0;
	right: 0;
	top: 0
	bottom: 0;
	margin: auto;
}
#wrap {
	position: relative;
}
.inner:nth-child(1) {}
.inner:nth-child(2) {}
  • all:将继承所有的状态
//less
.class {
	position: absolute;
	left: 0;
	right: 0;
	top: 0
	bottom: 0;
	margin: auto;
}
.class:hover {}

#wrap {
	position: relative;
	.inner {
		&:extend(.class all);
		&:nth-child(1) {}
		&:nth-child(2) {}
	}
}

//css
.class,
#wrap .inner,
#wrap .inner:nth-child(1),
#wrap .inner:nth-child(2) {
	position: absolute;
	left: 0;
	right: 0;
	top: 0
	bottom: 0;
	margin: auto;
}

.class:hover,
#wrap .inner:hover {}

#wrap {
	position: relative;
}
.inner:nth-child(1) {}
.inner:nth-child(2) {}
避免编译
  • ~" ":避免编译,留给浏览器进行计算
.class {
	padding: ~"cal(100px + 100)";
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值