Skip to main content

预处理•Less

变量​

@width:10px;

@height:@width+10px;

Mixins​

.border{
    border:1px solid #333;
}
.menu{
    color:#222;
    .border();
}

嵌套​

.header{
    color:#000;

    .nav{
        color:#333;
    }

    &:after{
        color:#444;
    }
}

运算​

@base: 5%;

@filler: @base * 2; // 结果是 10%

@other: @base + @filler; // 结果是 15%

转义​

@min768: (min-width: 768px);

.element {
    @media @min768 {
        font-size: 1.2rem;
    }
}

内置函数​

有下列3种用法

  • 转换颜色
  • 处理字符串
  • 算术运算

分组​

.header a {
    color: #333;
    $bundle.border(); // 还可以书写为 #bundle > .button 形式
}

起别名​

#colors {
    primary: blue;
    secondary: green;
}

.button {
    color: #colors[primary];
    border: 1px solid #colors[secondary];
}

作用域​

@var: red;

#page {
    @var: #000;

    #header {
        color: @var; //black
    }
}

注释​

  /* 一个块注释
   * style comment! */
  // 这一行被注释掉了！

导入​

@import "library"; // library.less
@import "typo.less";