相比css Less新增概念:
1、变量(variables):
在less中通过@关键字定义变量: 如 @width: 100px;
引用 div{ width: @width } 编译后: div{ width: 100px };
2、混合(mixin):
定义一个类的样式: .header{ width:100% }
在其他样式中使用混合包入.header的属性
footer{ .header() } 编译后: footer{ width:100% }
3、嵌套(nesting)
用类似于html组织结构代替层叠,使css代码父子结构更为清晰
如: #header .logo{ width: 100px } 用less的嵌套表示则为
#header{
.logo{ width: 100px }
}
还可以加上伪类选择器 (&
表示当前选择器的父级),以下是一个经典的 clearfix 技巧
.clearfix {
display: block;
zoom: 1;
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
@规则与冒泡
冒泡:当在使嵌套中使用@规则时,@规则会被放在嵌套最外层,但与@规则同级的其他属性相对位置不变。
如 .logo{
display: inline-block;
@media(min-width:768px){
width: 100px;
height: 100px;
}
@media(min-width:1280px){
width: 200px;
height:200px;
}
}
4、运算
可以使用 +,-,*,/对任何数字,颜色,变量进行运算
如: @width-1:10px;
@width-2: @width-1 * 2 // @width: 20px
不同单位会进行换算,计算结果单位以左侧操作数为准
@width-1:5cm;
@width-2:10mm;
@width-3:@width-1 + @width-2 //@width-3: 3cm;
乘除法不作单位转换
@width-1:5cm;
@width-2:2cm;
@width-3:width-1 * width-2; // width-3:10cm
calc()中的表达式不进行换计算
@baseWidth: 10%
width:calc(baseWidth+(50vh-20px)) // calc(10%+(50vh-20px))
5、转义
转义(Escaping)允许你使用任意字符串作为属性或变量值。任何 ~"anything"
或 ~'anything'
形式的内容都将按原样输出
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
编译为:
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
注意,从 Less 3.5 开始,可以简写为:
@min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}
}
6、Less 内置了多种函数用于转换颜色、处理字符串、算术运算等,详细请见https://less.bootcss.com/functions/
7、命名空间和访问符
当对可重复利用的样式进行封装时,可以对给这些样式进行分组给定命名空间(以下代码命名空间为bundle,bundle后加()则这组封装好的样式规则集不会输出在css中)
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
.tab { ... }
.citation { ... }
}
现在,如果我们希望把 .button
类混合到 #header a
中,我们可以这样做:
8、作用域
Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合(mixins),如果找不到,则从“父”级作用域继承。
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
与 CSS 自定义属性一样,混合(mixin)和变量的定义不必在引用之前事先定义。因此,下面的 Less 代码示例和上面的代码示例是相同的:
@var: red;
#page {
#header {
color: @var; // white
}
@var: white;
}
#header a {
color: orange;
#bundle.button(); // 还可以书写为 #bundle > .button 形式
}