zoukankan      html  css  js  c++  java
  • less新手入门(五)—— CssGuards、循环、合并

    九、 CssGuards

    警卫也可以应用于css选择器,这是一种语法糖,用于声明mixin,然后立即调用它。

    例如,在1.5.0之前,您必须这样做

    .my-optional-style() when (@my-option = true) {
      button {
        color: white;
      }
    }
    .my-optional-style();

    在目前的版本上,你可以直接把它写在样式上

    button when (@my-option = true) {
      color: white;
    }

    您还可以通过将其与&特性组合在一起来实现“if”类型的语句,从而允许您组织多个守护程序。

    & when (@my-option = true) {
      button {
        color: white;
      }
      a {
        color: blue;
      }
    }
    十三、父选择符
    • 引用父选择器与&

    操作符 & 表示嵌套规则的父选择符,并且在将修改类或伪类应用于现有选择器时最常用:

    a {
      color: blue;
      &:hover {
        color: green;
      }
    }

    输出:

    a {
      color: blue;
      &:hover {
        color: green;
      }
    }

    注意,如果没有&,上面的例子会导致a :hover规则(一个后代选择器匹配<a>标签内部的悬停元素),这不是我们通常想要嵌套的:hover

    “父母选择器”操作符 & 有多种用途。基本上任何时候都需要嵌套规则的选择器以默认的方式进行组合。例如,另一个典型的用法&是产生重复的类名:

    .button {
      &-ok {
        background-image: url("ok.png");
      }
      &-cancel {
        background-image: url("cancel.png");
      }
    
      &-custom {
        background-image: url("custom.png");
      }
    }

    输出:

    .button-ok {
      background-image: url("ok.png");
    }
    .button-cancel {
      background-image: url("cancel.png");
    }
    .button-custom {
      background-image: url("custom.png");
    }
  • 相关阅读:
    SQL Server Alwayson架构下 服务器 各虚拟IP漂移监控告警的功能实现 -2(虚拟IP视角)
    Android LitePal
    Android SQLite
    汇编语言知识点总结
    三层架构
    将博客搬至CSDN
    回溯(二)
    Android持久化技术
    Android广播时间——实现强制下线功能
    Android广播机制(2)
  • 原文地址:https://www.cnblogs.com/fighxp/p/8080558.html
Copyright © 2011-2022 走看看