一种动态的样式语言--Less 之 命名空间

LESS 命名空间

如果想更好的组织CSS或者单纯是为了更好的封闭，将一些变量或者混合模块打包起来，你像下面这样在#bundle中定义一些属性集之后可以重复使用：

#bundle{
    .button(){
        display: block;
        border: 1px solid black;
        background-color: grey;
        &:hover{ background-color: white}
    }
    .tab{ ... }
    .citation { ... }
}

你只需要在#header a中像这样引入.button:

#header a{
    color: orange;
    #bundle > .button;
}

 

作用域：

LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.

@var: red;
#page{
    @var: white;
    #header{
        color: @var; // white
     }
}

#footer{
    color: @var; //red
}