一种动态的样式语言--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

}

巴特西

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

最新文章

热门文章

巴特西

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

最新文章

热门文章

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