Less语言高级用法总结

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。
最后附在线参考示例

1. 变量

//滚动条样式
@primary-color: #29CCCC;
@body-background: rgba(14, 36, 36, 0.6);
@-webkit-box-shadow: inset 0 0 6px @body-background;
.scroll-ext {
    &::-webkit-scrollbar-track {
        -webkit-box-shadow: @-webkit-box-shadow;
        background-color: @body-background;
        border-radius: 10px;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, @primary-color), color-stop(0.72, @primary-color), color-stop(0.86, @primary-color));
    }

    &::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        background-color: @body-background;
    }
}

2. 用表达式计算

.cal-top(@n) {
    @var: unit(42*(@n - 1)+10);
    top:~'@{var}px';
}
//使用类
 .test {
     position: absolute;
     right: 10px;
     margin: 0px 0px 3px 0px;
     width: 108px;
     float: right;
    .cal-top(3); 
 }

3. 继承

• 基类

.base{
	color:red;
}
.base:hover{
  background: red;
}

• 方式方法

1. 放到样式集中使用，但注意在使用时需在前面加上 ‘&’ 符号，继承多个类用,隔开

<selector> {
  &:extend(<extendSelector>);
}

2. 直接附加在选择器上使用

<selector>:extend(<extendSelector>) { }

• 示例如下：

1. 只继承base的所有，不继承伪类

.base-ext{
 	&:extend(.base);
}
或
.base-ext:extend(.base){
 	padding:10px;
}

2. 继承base的所有，包括伪类

.base-ext{
	padding:10px;
 	&:extend(.base all);//all表示继承所有的伪类
}
或
.base-ext:extend(.base all){
 	padding:10px;
}

示例参见