Less 提供了使用嵌套(nesting)代替层叠或与层叠结合使用的能力。
嵌套(Nesting)
index.less代码 >>>
#sex{
color: red;
}
#sex .man{
color: blue;
}
#sex .woman{
color: pink;
}
改为嵌套后 >>>
#sex {
color: red;
.man {
color: blue;
}
.woman {
color: pink;
}
}
编译为css后 >>>
#sex {
color: red;
}
#sex .man {
color: blue;
}
#sex .woman {
color: pink;
}
@规则嵌套和冒泡
@ 规则(例如 @media 或 @supports)可以与选择器以相同的方式进行嵌套。@ 规则会被放在前面,同一规则集中的其它元素的相对顺序保持不变。这叫做冒泡(bubbling)。
index.less代码 >>>
.component {
width: 300px;
@media (min-width: 768px) {
width: 600px;
@media (min-resolution: 192dpi) {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
width: 800px;
}
}
编译为css后 >>>
.component {
width: 300px;
}
@media (min-width: 768px) {
.component {
width: 600px;
}
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
.component {
background-image: url(/img/retina2x.png);
}
}
@media (min-width: 1280px) {
.component {
width: 800px;
}
}
运算(Operations)
就是日常的基本操作,什么加减乘除之类的,计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义,则忽略单位。无效的单位换算例如:px 到 cm 或 rad 到 % 的转换。
index.less代码 >>>
@width:10px;
@second-width:@width+20px;
@third-width:@width/2;
.demo1{
width: @second-width;
}
.demo2{
width: @third-width;
}
编译成css后 >>>
.demo1 {
width: 30px;
}
.demo2 {
width: 5px;
}
转义(Escaping)
转义(Escaping)允许你使用任意字符串作为属性或变量值。任何 ~“anything” 或 ~‘anything’ 形式的内容都将按原样输出,除非 interpolation。
index.less代码 , 不加 ~ 的情况 >>>
@min768: "(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
编译后,爆红报错 >>>
index.less代码 >>>
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
写成这样也行 >>>
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
编译完成后 , 完美成功 >>>
下一章进行less学习最后的讲解,有些太深入的需要去官方看文档,其实平时开发自己的less也不一定全部逗得用上,只要能高效解决问题实现目标的就是好办法