Less是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。

使用Less语言来编写样式时,特别适合模块化编程,代码看起来更具有条理性。还有对一些不确定的CSS属性,可以先用变量@vaule替代的方式,然后把这些变量统一写在variables.less文件中,待样式全部写完之后,再去对这些不确定的变量赋值。而且代码的可维护性比css更好一点,能够实现在较短的时间内高效开发出页面。

基本语法

1、变量——Variables

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
    color: @light-blue;
}

2、混入——Mixins

//一般的混入
.bordered {
    border-top: dotted 1px black;
    border-bottom: solid 2px black;
}
#menu a {
    color: #111;
    .bordered;
}
//函数的混入
.average(@x, @y) {
    @average: ((@x + @y) / 2);
}
div {
   .average(16px, 50px);
   padding: @average;
}

3、嵌套规则——Nested Rules

#header {
    color: black;
    .navigation {
    font-size: 12px;
    }
    .logo {
        width: 300px;
    }
    &:after {
        content: " ";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
}

4、运算——Operation

任何数字、颜色或者变量都可以参与运算。下面是一组案例:

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;
color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

5、函数——Function

Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。这些函数在函数手册中有详细介绍。函数的用法非常简单。下面这个例子将介绍如何将 0.5 转换为 50%,将颜色饱和度增加 5%,以及颜色亮度降低 25% 并且色相值增加 8 等用法:

@base: #f04615;
@width: 0.5;
.class {
    width: percentage(@width); // returns `50%`
    color: saturate(@base, 5%);
    background-color: spin(lighten(@base, 25%), 8);
}

6、命名空间——Namespaces

#bundle {
    .button {
         display: block;
         border: 1px solid black;
         background-color: grey;
         &:hover {
         background-color: white
    }
}
#header a {
    color: orange;
    #bundle > .button;
}