less `:extend`如何继承全部属性

作者: 柳正来 | 来源:发表于2017-12-15 13:56 被阅读35次

今天碰到以下情况:

.a {
  &:extend(.b);
}

.b {
  color: red;
  .c {
    color: green;
  }
}

.a想完全继承.b及其孩子的属性. 但是上面的代码只会被翻译为

.b,
.a {
  color: red;
}
.b .c {
  color: green;
}

可以看到没有产生我想要的.a .c { color: green; }的效果. 看了一下Less: Extend Syntax才知道还要加一个all才行.

.a {
  &:extend(.b all);
}

.b {
  color: red;
  .c {
    color: green;
  }
}

翻译的css如下:

.b,
.a {
  color: red;
}
.b .c,
.a .c {
  color: green;
}

less `:extend`如何继承全部属性
今天碰到以下情况: .a想完全继承.b及其孩子的属性. 但是上面的代码只会被翻译为可以看到没有产生我想要的.a ...
2017-3-22 less
Extend伪类样式的继承使用 LESS: CSS: 命名空间和作用域指定命名空间LESS: CSS: 私有作...
ES6 笔记 Class和继承
定义class 通过extend来继承父类的属性和方法 Mix mix允许继承多个类的属性（实例属性和protot...
如何用es5实现继承
extend (继承) 如何用 es5 实现继承测试结果原文链接
【CSS】Less
LESS 语法变量 @ 样式变量样式名变量选择器变量变量拼接父选择器 & 嵌套继承extend 合并属...
scss 的extend和mixin的写法
extend extend 是继承一个 scss 选择器内的css属性如下代码: 会被编译成可以看到, 使用了 ...
Less 03 扩展（Extend）
目录： Less 01 准备工作Less 02 变量（Variable）Less 03 扩展（Extend）Les...
Less 04 混入（Mixins）
目录： Less 01 准备工作Less 02 变量（Variable）Less 03 扩展（Extend）Les...
Less 01 准备工作
目录： Less 01 准备工作Less 02 变量（Variable）Less 03 扩展（Extend）Les...
Less 09 守卫（Guards）
目录： Less 01 准备工作Less 02 变量（Variable）Less 03 扩展（Extend）Les...

网友评论

本文标题：less `:extend`如何继承全部属性

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

less `:extend`如何继承全部属性