美文网首页
Less CSS 守卫

Less CSS 守卫

作者: 暖A暖 | 来源:发表于2020-08-19 09:41 被阅读0次

本节我们学习 CSS守卫(CSS Guards),在上一节中,我们学习了混合守卫,如何对 Mixins 进行条件判断。但是某些时候我们不止需要对 Mixins 进行条件判断, 也需要对 CSS 的样式类进行条件判断。所以这就需要用到 CSS 守卫啦。

CSS 守卫是在 v1.5.0 版本才添加的,而在 v1.5.0 版本之前,如果我们要定义一个 CSS 守卫:

.xkd() when (@choice = true) {
  p{
    color: @color;
  }
}

.xkd();

现在我们可以直接在样式类上应用 guard ,例如:

p when (@choice = true) {
  color: red;
}

我们还可以通过与 & 符号结合实现 if 类型的语句,从而实现对多个样式类进行条件判断:

& when (@choice = true) {
  p {
    color: white;
  }
  a {
    color: blue;
  }
}
示例:

下面我们来看一个 CSS 守卫的具体例子:

@variable: a;
.xkd() {
   @variable: b;
  .style1 when (@variable=a) {
    font-size: 12px;
    color: red;
  }
  .style2 when (@variable=b) {
   font-size: 16px;
    color: blue;
  }
}

.xkd();

编译成 CSS 代码:

.style2 {
  font-size: 16px;
  color: blue;
}

上述代码中,在混合 .xkd 中多两个样式类进行了条件判断,条件判断的依据是变量 @variable 变量的值,而根据之前我们学习过的变量作用于可以知道,会优先在混合.xkd 中查找变量 @variable,此时 @variable 的值为 b,所以可以看到编译后输出样式为 .style2

相关文章

  • Less CSS 守卫

    本节我们学习 CSS守卫(CSS Guards),在上一节中,我们学习了混合守卫,如何对 Mixins 进行条件判...

  • Less CSS 守卫

    本节我们学习 CSS守卫(CSS Guards),在上一节中,我们学习了混合守卫,如何对 Mixins 进行条件判...

  • 2017-3-21 less

    混合 1、定义一个带参数的属性集合 LESS: CSS: 2、 LESS : CSS: 3 、 LESS: CSS...

  • less的介绍

    less是什么? less是css云处理器 全局安装less包 查看less是否安装成功 less完全兼容css ...

  • 2017-3-24 less

    CSS Guards(CSS保护) LESS: Import Directives (导入准则) LESS: CS...

  • 2017-3.20 less

    导航栏 HTML: Less: CSS : 图片 HTML: Less: CSS : 在 LESS 中可以定义一些...

  • 预处理器less、sass和css之间的相互转换

    less和css相互转换 less2css 工具转npm i -g less 进入到less文件所在目录,执行命令...

  • Vue项目中引入外部文件(css、js、less)

    例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义...

  • vue中引入外部css的配置方法

    例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义...

  • Less学习总结

    say hello & intro Less is More,Than CSS-少即是多,比CSS less介绍-...

网友评论

      本文标题:Less CSS 守卫

      本文链接:https://www.haomeiwen.com/subject/njhrjktx.html