Less的简单使用（五）——Detached Rulesets的用法

Less的简单使用（五）——Detached Rulesets的用法

Detached Rulesets包含一个普通的规则集，例如属性、嵌套规则集、变量声明、媒体声明、mixins等。它存储在一个变量中，并包含在其他结构中，其中规则集的所有属性都将被复制到该结构。可以用作mixin参数，将其作为变量进行传递

一、Detached Rulesets的正常用法

.less文件中的代码：

//Detached Ruleset  将规则集分配给变量
@detached: {
    border: 1px solid green;
    @color: red;
};
#detached {
    @detached(); //必须带有括号，@detached无效
    color: @detached[@color]; //后面带有查找值时，可以不需要括号
}

Detached Rulesets调用时的括号是强制性的（除非后面带有查找值），直接使用@detached；是无效的

.css文件中的css代码：

#detached {
  border: 1px solid green;
  color: red;
}

二、在@media查询中封装代码

当想要定义一个mixin时，它可以在媒体查询或者非支持的浏览器类名中封装一段代码。规则集可以传递给mixin，以便mixin可以包装内容

.less文件中的代码：

.desktop-and-old-ie(@rules) {
    @media screen and (min-width: 1200px) { 
      @rules(); 
    }
    html.lt-ie9 & { 
      @rules(); 
    }
  }   //.desktop-and-old-ie 定义了媒体查询和根类
  #header {
    background-color: blue;
    .desktop-and