命令空间、映射、作用域

本文共--字 阅读约--分钟 | 浏览: -- Last Updated: 2021-05-19

命令空间

#my-div {
  @border: 1px solid #ccc;

  .my-p {
    color: red;
    border: @border;
  }
  
  .my-span {
    color: green;
    font-size: 20px;
  }
  
  a {
    color: red;
  }
}

// 希望在 #my-header中的 span p 也应用 #my-div 中 .my-span .my-p 的样式

#my-header {
  p {
    #my-div.my-p; // 也可以写作 #my-div > .my-p
  }
  
  span {
    #my-div.my-span;
    display: inline-block;
  }

  // 需要注意的是，标签选择器不能被引入 
  // a {
  //   #my-div > a; // error
  // }
}

// 编译为
#my-div .my-p {
  color: red;
  border: 1px solid #ccc;
}
#my-div .my-span {
  color: green;
  font-size: 20px;
}
#my-header p {
  color: red;
  border: 1px solid #ccc;
}
#my-header span {
  color: green;
  font-size: 20px;
  display: inline-block;
}

映射

从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

#colors() {
  primary: blue;
  secondary: green;
}

.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

作用域

Less 中的作用域与 CSS 中的作用域非常类似。首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承。

@var: red;

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

需要注意的是，父级一定是在 less 中的父级，而与是在 DOM 选择器的父级。如果有如下 DOM

<div class="my-div">
  <p></p>
</div>

.my-div {
  @c: red; // 定义在父级
}

p {
  @c: red; // 声明在本身
}

p {
  // 与上面都不是同一个作用域
  // 只有在这里，或者在这条规则的包括才行
  color: red; // error ariable @c is undefined
}

p {
  @c: green;
  color: @c; // green
}

.my-div{
  @c: blue;

  p {
    color: @c; // blue
  }
}

当在一个作用域中有多个同样的变量声明时，会取能访问到的最近的“最终”值

@var: red;

#page {
  @var: white;
  #header {
    color: @var; // black
    
    p {
      @var: orange;
      
      color: @var; // orange
    }
  }
  
  @var: black;
  
  #footer {
    @var: pink;
  }
}