LESS详解之命名空间

╰+攻爆jí腚メ 2022-09-17 13:15 530阅读 0赞

　　提到命名空间，大家有一些语言基础的小伙伴儿一定会比较熟悉。LESS中也有命名空间，今天就为大家介绍一下LESS中的命名空间是如何使用的。

　　有时候，你可能为了更好组织 CSS 或者单纯是为了更好的封装，将一些变量或者混合模块打包起来，一些属性集之后可以重复使用。小例子如下

　　LESS代码

  1. .meng {
  2.     .meng_button () {
  3.         display: block;
  4.         border: 1px solid black;
  5.         background-color: grey;
  6.         &:hover { background-color: white }
  7.     }
  8.     .meng_tab () {
  9.     width:100px;
  10.     }
  11.     .meng_citation () {
  12.     height:200px;
  13.     }
  14. }
  16. div {
  17.     .meng > .meng_tab;
  18. }
  19. h1 {
  20.     .meng > .meng_citation;
  21. }

　　编译后的CSS代码

  1. div {
  2.   width: 100px;
  3. }
  4. h1 {
  5.   height: 200px;
  6. }

　　LESS中的命名空间，我认识就是LESS中作用域的应用，属于高级语法，在日常项目中应用比较广泛。我们可以用LESS中的命名空间为自己封装一些日常比较常用的类名，以便以后做项目的时候更有效率。

发表评论

表情：
评论列表 （有 0 条评论，530人围观）

还没有评论，来说两句吧...

相关阅读

    相关 LESS详解之命名空间

    　　提到命名空间，大家有一些语言基础的小伙伴儿一定会比较熟悉。LESS中也有命名空间，今天就为大家介绍一下LESS中的命名空间是如何使用的。 　　有时候，你可能为了更好组织

    ╰+攻爆jí腚メ╰+攻爆jí腚メ/ 0 赞/ 531 阅读

    相关 LESS详解之嵌套(&)

    　　LESS是一种动态语言，属于CSS预处理语言的一种。LESS和其他预处理语言一样也支持嵌套的写法。下面就为大家通过小例子来介绍LESS中的嵌套书写方式。 　　

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 414 阅读

    相关 LESS详解之变量(@)

    　　变量基本上是每个语言脚本上都会涉及的一个小小知识点，是学好语言脚本的必经之路。LESS中也可以设置变量，然后通过变量可以改变整个网站的设计风格。良好的掌握LESS中变量的用

    亦凉亦凉/ 0 赞/ 507 阅读

    相关 LESS详解之编译LESS

    　　掌握LESS，必须先掌握LESS的编译。因为LESS是CSS预处理语言的一种，是一种动态语言。LESS可以运行在各种语言和环境中，包括浏览器端、服务器端等。就因为是一种CS

    ╰+攻爆jí腚メ╰+攻爆jí腚メ/ 0 赞/ 546 阅读

    相关 XML和Schema命名空间详解

     XML和Schema具有无关平台,技术厂商,简单,规范统一等特点,极具开放性,所以使用极为广泛,而且使用简单,在XML和Schema和,个人认为比较不好理解的一点是其命名空间

    向右看齐向右看齐/ 0 赞/ 333 阅读