Less 命名空间

命名空间是一种将变量、函数和其他标识符封装在一起的机制,以便在一个程序中使用时不会与其他程序中的标识符发生冲突。它可以帮助我们组织和管理代码,避免命名冲突,并提高代码的可读性和可维护性。在不同的编程语言中,命名空间的实现方式可能有所不同。

下面将介绍 Less 中如何声明命名空间以及作用域相关知识。

声明命名空间

有时候,你可能为了更好组织 CSS 或者单纯是为了更好的封装,将一些变量或者混合模块打包起来, 你可以像下面这样在 #bundle 中定义一些属性集之后可以重复使用:

// 声明命名空间 #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;
   // 引用命名空间下的 .button 混入
   #bundle>.button;
}

编译 less,输出的 CSS 如下:

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

作用域

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

@var: red;

#page {
   @var: white;

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

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

编译 less,输出的 CSS 如下:

#page #header {
 color: white;
}
#footer {
 color: red;
}
说说我的看法
全部评论(
没有评论
关于
本网站属于个人的非赢利性网站,转载的文章遵循原作者的版权声明,如果原文没有版权声明,请来信告知:hxstrive@outlook.com
公众号