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-old-ie({
      background-color: red;
    });
  }

.css文件中的css代码：

#header {
  background-color: blue;
}
@media screen and (min-width: 1200px) {
  #header {
    background-color: red;
  }
}
html.lt-ie9 #header {
  background-color: red;
}

三、将规则集分配给变量或传递给mixin

.less文件中的代码：

//将规则集传递给mixin
@my-ruleset: {
  //加了括号则不会在css文件中出现，没有加括号将会在css文件中出现，和mixin规则一样
  .my-selector() {  
    background-color: black; 
  }  
  @color: skyblue;//将规则集分配给变量
};
#my-ruleset {
  @my-ruleset();
  .my-selector();
  color: @my-ruleset[@color];
}

.css文件中的css代码：

#my-ruleset {
  background-color: black;
  color: skyblue;
}

四、@media查询冒泡

.less文件中的代码：

//使用媒体查询起泡
@float: {
    .float-l {
        @media x {
            @media z {
                float: left;
            }
        }
    }
}
@media y {
    @float();
}

.css文件中的css代码：

@media y and x and z {
  .float-l {
    float: left;
  }
}

私有变量，不可以直接调用

.less文件中的代码：

// 私有变量，是访问不到@color这个变量的
@private1: {
  @color: skyblue;
}
#private1 {
  // @private();
  // color: @color;  直接调用规则集中的变量无效
  color: @private1[@color];
}

.css文件中的css代码：

#private1 {
  color: skyblue;
}

五、Scoping

一个分离的规则集可以使用变量和mixin，在定义和调用方作用域都可以访问。否则，定义和调用方作用域对它都是可用的。如果两个作用域包含相同的变量或mixin函数，则声明范围值优先

声明范围： 声明范围是定义分离的规则集主体的范围。将分离的规则集从一个变量复制到另一个变量不能修改其作用域。规则集不能仅仅通过在那里被引用而获得对新作用域的访问权，分离的规则集可以通过被解锁(导入)到范围中来获得对范围的访问权

注：不赞成通过调用mixin将变量解锁到作用域中，应该使用属性或者变量访问器

.less文件中的代码：

// 分离的规则可以看到调用方的变量和mixin
@private: {
  color: @color;
  .my-mixin();
};

#private {
  @private();
  @color: red;
  .my-mixin() {
    font-family: monospace;
  }
}

.css文件中的css代码：

#private {
  color: red;
  font-family: monospace;
}

调用方中的可访问的变量和mixin将会覆盖在定义中的 （官方文档有误）

.less文件中的代码：

// 调用方中的变量会覆盖在定义中可访问的变量和mixin
//官方文档错误
@value: left;
@excel: {
  float: @value;
}
#excel {
  @excel();
  @value: right;
}

.css文件中的css代码：

#excel {
  float: right;
}

六、引用将会修改分离的规则集范围

通过给出引用，规则集是会访问到新的范围 （官方文档有误）

.less文件中的代码：

//规则集可以在其中引用而获得对新作用域的访问
@detached-1: { scope-detached: @one @two; };
.one {
  @one: bottom;
  .two {
    @detached-2: @detached-1; // copying/renaming ruleset 
    @two: top; // ruleset can not see this variable
  }
}
.use-place {
  // .one > .two(); 
  // .one();
  // .two();
  .one .two();
  @detached-2();
}

.css文件中的css代码：

.use-place {
  scope-detached: bottom top;
}

.less文件中的代码：

.cheat {
  .exam {
    @cheat: {
      position: @rela;
    };   
  }
}
#cheat {
  @rela: relative;
  .cheat .exam;
  @cheat();
}

.css文件中的css代码：

#cheat {
  position: relative;
}

七、解锁将修改分离的规则集范围 （个人觉得其实引用可以修改范围的话，这个可以不看）

.less文件中的代码：

// 解锁将修改分离的规则集范围
#space {
  .importer-1() {
    @detached: { scope-detached: @variable1; }; // define detached ruleset
  }
}

.importer-2() {
  @variable1: value; // unlocked detached ruleset CAN see this variable
  #space > .importer-1(); // unlock/import detached ruleset
}

.use-place {
  .importer-2(); // unlock/import detached ruleset second time
   @detached();
}

.css文件钟的css代码：

.use-place {
  scope-detached: value;
}

八、属性/变量访问器

可以使用属性/变量访问器（查找）从变量（分离的）规则集中选择一个值

.less文件中的代码：

// 属性/变量访问器
// 可以使用属性或者变量访问器来从分离的规则集中选择一个值
@config: {
  bool1: true;
  bool2: false;
}
.mixin-one() when (@config[bool1] = true) {
  padding: 10px;
}
#mixin-one {
  .mixin-one();
}

.css文件中的css代码：

#mixin-one {
  padding: 10px;
}

如果从查找返回的是另一个分离的规则集，则可以使用第二个查找来获取该值

.less文件中的代码：

// 如果返回的是另一个分离的规则集,可以使用两个查找来获取该值
@config1: {
  @colors: {
    primary: blue;
  }
}
.box {
  color: @config1[@colors][primary];
}

.css文件中的代码：

.box {
  color: blue;
}

九、查找变量中的变量

返回的查找值本身是可变的

.less文件中的代码：

// 返回的查找值本身是可以变化的,可以通过定义一个变量来控制返回的查找值
@config2: {
  @dark: {
    color: red;
  }
  @light: {
    color: green;
  }
}
#light {
  @look: light;
  color: @config2[@@look][color];
}

.css文件钟的css代码：

#light {
  color: green;
}