zoukankan      html  css  js  c++  java
  • less学习笔记六

    一、Mixins as Functions,混合类作为函数

    定义在一个混合类A中的变量Vs和混合子类Ms是可见的,可以在调用者的作用域内使用。但有一个例外,如果调用者中包含相同名称的变量,那么A中的变量不会被复制过去。只有出现在调用者本地作用域内的变量才是被保护的,继承自父作用域的变量会被重写。

    .mixin() {
      @  100%;
      @height: 200px;
    }
    
    .caller {
      .mixin();
        @width;
      height: @height;
    }
    
    /**outputs**/
    .caller{
       100%;
      height: 200px;
    }

    混合类中的变量可以看做混合类函数的返回值

    .average(@x, @y) {
      @average: ((@x + @y) / 2);
    }
    
    div {
      .average(16px, 50px); // "call" the mixin
      padding: @average;    // use its "return" value
    }
    /**outputs**/
    div {
      padding: 33px;
    }

    定义在调用者作用域中的变量不能被重写,但是调用者父作用域中的变量是不受保护的,可以被重写。

    二、Passing Rulesets to Mixins,传递规则集给混合类

    允许包含一个css块,定义在混合类中。

    分离的规则集合是一组css属性、嵌套规则集、媒体声明或者其他存储在变量中的内容。你可以把它放进一个规则集中或者别的结构中,然后它的所有属性都会复制过去。也可以将它用作一个混合类参数,使用变量参数传值的方式给它传值。

    // declare detached ruleset
    @detached-ruleset: { background: red; };
    
    // use detached ruleset
    .top {
        @detached-ruleset(); 
    }
    
    /**outputs**/
    .top {
      background: red;
    }

    分离的规则集被调用时后面的圆括号()是必须的,调用@detached-ruleset;将不会起作用。

    当你需要定义一个混合类,用来抽象出包含一块媒体查询代码,或者一个浏览器不支持的类名,这会非常有用。规则集传入混合类参数中,包含所有的内容。

    .desktop-and-old-ie(@rules) {
      @media screen and (min- 1200) { @rules(); }
      html.lt-ie9 &                       { @rules(); }
    }
    
    header {
      background-color: blue;
    
      .desktop-and-old-ie({
        background-color: red;
      });
    }
    
    /**outputs**/
    header {
      background-color: blue;
    }
    @media screen and (min- 1200) {
      header {
        background-color: red;
      }
    }
    html.lt-ie9 header {
      background-color: red;
    }

    三、Mixin Guards,混合类条件

    它与mixin声明相关联,并包括附加到mixin的条件。 每个mixin将有一个或多个由逗号分隔的防护,并且guard必须括在括号中。 LESS使用Guards的mixins而不是if / else语句,并执行计算以指定匹配的mixin。

    .mixin (@a) when (lightness(@a) >= 50%) {
      background-color: black;
    }
    .mixin (@a) when (lightness(@a) < 50%) {
      background-color: white;
    }
    .mixin (@a) {
      color: @a;
    }
    .class1 { .mixin(#ddd) }
    .class2 { .mixin(#555) }
    
    /**outputs**/
    .class1 {
      background-color: black;
      color: #ddd;
    }
    .class2 {
      background-color: white;
      color: #555;
    }

    Guard Comparison Operators,比较运算

     运算符有 >, >=, =, =<, <,关键字true是唯一的真值,以下两个写法是等价的

    .truth (@a) when (@a) { ... }
    .truth (@a) when (@a = true) { ... }
    .truth (@a) when (@a) { font-size:70px; }
    .truth (@a) when (@a = true) { font-weight:1000; }
    
    .section{
        .truth(true);//true以外的任何值都会被认为false,无法引用到混合类
    }
    
    /**outputs**/
    .section {
      font-size: 70px;
      font-weight: 1000;
    }

    Guard Logical Operators,逻辑运算符

    语法基于CSS media queries.使用关键字and来连接条件语句。

    .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }

    可以使用逗号,或者or运算符来分割条件语句,任何一个条件得到的值为真时,则该混合类匹配。以下两种写法等价

    .mixin (@a) when (@a > 10), (@a < -10) { ... }
    .mixinP (@a) when (@a > 10)or(@a < -10) { background:red; }

    使用关键字not,来做“非”运算

    .mixin (@b) when not (@b > 0) { ... }

    Type Checking Functions,类型校验函数

    如果你想通过参数值的类型来匹配混合类,可以使用is函数

    .mixin (@a; @b: 0) when (isnumber(@b)) { ... }
    .mixin (@a; @b: black) when (iscolor(@b)) { ... }

    常用is函数:

    • iscolor
    • isnumber
    • isstring
    • iskeyword
    • isurl

    单位判断函数:

    • ispixel
    • ispercentage
    • isem
    • isunit

     default()函数,用在其他混合类不匹配时

    .mixin (@a) when (@a > 0) { ...  }
    .mixin (@a) when (default()) { ... } // matches only if first mixin does not, i.e. when @a <= 0
  • 相关阅读:
    20200209 ZooKeeper 3. Zookeeper内部原理
    20200209 ZooKeeper 2. Zookeeper本地模式安装
    20200209 Zookeeper 1. Zookeeper入门
    20200206 尚硅谷Docker【归档】
    20200206 Docker 8. 本地镜像发布到阿里云
    20200206 Docker 7. Docker常用安装
    20200206 Docker 6. DockerFile解析
    20200206 Docker 5. Docker容器数据卷
    20200206 Docker 4. Docker 镜像
    Combining STDP and Reward-Modulated STDP in Deep Convolutional Spiking Neural Networks for Digit Recognition
  • 原文地址:https://www.cnblogs.com/Youngly/p/6812078.html
Copyright © 2011-2022 走看看