- 两种注释方法
(1) /**/ 该方法在less转化为css时会显示
(2) // 该方法不会在css中显示
- 变量:使用 @ 定义
@color : red; /* 1.定义普通变量 */
@m : margin; /* 2.将属性定义为变量,调用时用{}包裹,不常用 */
@s : 'http://127.0.0.1'; /* 3.作为url前缀 */
#main { /* 4.变量会延迟加载 */
@var : 0 ;
background-color : @color;
@{m} : 0;
background-img : url('@{base}/img/2.jpg');
.inner {
@var : 2;
three: @var; /* 3 */
@var : 3;
}
}
- 嵌套规则:父子层关系,使用 &
#body {
width: 300px;
height: 300px;
background-color: @color;
display: flex;
justify-content: center;
align-items: center;
.inner {
width: 100px;
height: 100px;
/* 使用&时:#body .inner:hover */
&:hover {
// &代表#body .inner
background-color: red;
}
/* 不使用&:#body .inner :hover */
:hover {
background-color: red;
}
}
}
- 混合:代码重用
- 普通混合:会被编译为css
.center {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: red;
}
- 不带输出的混合:使用(),此时不会被转化为css
.center () {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: red;
}
/* 调用 */
#top {
.top1 {
.center // 直接调用即可;
}
.top12 {
.center;
}
}
- 带参数的混合
.left (@t,@l,@b,@r) {
position: relative;
top: @t;
left: @l;
bottom: @b;
right: @r;
}
/* 调用 */
#wrap {
.left(100px, 100px,100px,100px);
}
- 带参数且有默认值的混合
.content (@l,@r,@t:10px,@b:10px) {
/* 带默认值必须放置于后面 */
position: relative;
top: @t;
left: @l;
bottom: @b;
right: @r;
}
#inner {
.content(50px, 50px);
}
- 命名参数
#outter {
/* 命名参数,可以无视放置位置 */
.content(@r:20px,@l:60px,@t:10px);
}
- 匹配模式
.main (@_) {
/* 存放公共属性 */
width: 0;
height: 0;
}
/* 四个方向 */
.main (L,@w,@c) {
border-width: @w;
border-style: solid;
border-color: transparent transparent transparent @c;
}
.main (R,@w,@c) {
width: 0;
height: 0;
border-width: @w;
border-style: solid;
border-color: transparent @c transparent transparent;
}
.main (T,@w,@c) {
width: 0;
height: 0;
border-width: @w;
border-style: solid;
border-color: @c transparent transparent transparent;
}
.main (B,@w,@c) {
width: 0;
height: 0;
border-width: @w;
border-style: solid;
border-color: transparent transparent @c transparent;
}
#inner {
.main(B,@w:40px, @c: red); /* 匹配模式,使用@_存放公共方法 */
}
- arguments变量:替代书写变量
.border-radius (@x:0,@y:0,@blur:1px,@color:red) {
box-shadow: @arguments;/* 省去了写参数的步骤,直接使用arguments作为替代 */
-webkit-box-shadow: @arguments; /* 兼容写法 */
-moz-box-shadow: @arguments;
}
/* 调用 */
#bor {
.border-radius(2px,5px,15px,green);
}
- 运算:仅需一方带单位即可
#container {
width: 100px;
height: 100px;
.border-radius(2+15px, 5px, 15px, red); // box-shadow: 17px 5px 15px red;
}
-
引入文件:@import ‘路径’
@import ‘…/1.less’ -
less继承 :extend 继承方法不支持带参数 所有的继承都必须在选择器的末尾。
.toper {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: red;
}
.border:extend(.toper) { /* border自身的属性 */
width: 100px;
height: 100px;
}
- 原样输出:~
#con{
height: 100px;
height: 100px;
margin: 10px;
border-width: ~"50+10px"; /* 进行原样输出 */
}