Sass 操纵继承的财产？

在Sass中，是否可以操作给定元素已经继承的值

我的目标是这样：

body
  color: blue
  .warning
    color: red

strong
  color: darken(inherit,20)

.foo {
    background: mix(white, blue); // fallback for non-rgba browsers
    background: rgba(blue, .5);

    .baz & {
        background: yellow;
    }

    @media (min-width 30em) {
        background: orange;
    }

    @supports (flex-wrap: wrap) {
        background: red;
    }
}

.bar {
    // access which background color from .foo ????
}

遗产 不知道。Sass不知道从哪个选择器继承颜色。它必须知道斯特朗是身体的后代。对你我来说，这似乎是一个足够合理的假设，因为强者是不允许在身体之外出现的，但对于大多数选择者来说，这种假设是不可能的。Sass还必须知道，没有来自其他祖先元素的级联

ul {
    color: red;
}

ol {
    color: blue;
}

li {
    // which color do I inherit from ????
}

我可以指定要从哪个选择器进行复制吗？ Sass也不允许以任何方式访问任何先前声明的变量的值。没有办法指定颜色比身体颜色深。CSS规则不是对象或映射，不能以任何方式访问。你的情况可能很简单，但是考虑一个更复杂的例子：

body
  color: blue
  .warning
    color: red

strong
  color: darken(inherit,20)

.foo {
    background: mix(white, blue); // fallback for non-rgba browsers
    background: rgba(blue, .5);

    .baz & {
        background: yellow;
    }

    @media (min-width 30em) {
        background: orange;
    }

    @supports (flex-wrap: wrap) {
        background: red;
    }
}

.bar {
    // access which background color from .foo ????
}

那我该怎么办？ 您要么需要使用变量，要么它必须是香草CSS的一个特性，才能实现您想要的功能

老式CSS 某些属性可能会让人产生一种错觉，即使用浏览器支持多年的东西动态生成/继承：

ul.1{ 背景：白色； } ul.2{ 背景：黄色； } 保险商实验室{ 背景：rgba0、120255、.2； 填充：1em； } 福 福

---

我在找同样的东西，遇到了这个。你的问题得到了回答，但没有解决问题

以下是解决方案：

如果您的HTML是这样的：

    <div class="main">
      <header class="header">
        <div class="warning">
          <p><strong>Danger,</strong> Will Robinson!</p>
        </div>
      </header>
    </div>

SASS似乎不知道它的输出结果。因此，继承对它来说毫无意义。你基本上要求它在输出之前知道输出是什么

不过，它确实知道它是变量，因为默认情况下，它们的作用域是紧密的。 从文档中：

变量仅在定义它们的嵌套选择器级别内可用。如果它们是在任何嵌套选择器之外定义的，那么它们在任何地方都可用

然后是mixin中的变量：

传递给mixin的内容块在定义块的范围内进行评估，而不是在mixin的范围内

这允许上面的mixin获取父级别中定义的已知变量，并为当前级别重新定义该变量，并可供其子级别使用。这就像在多嵌套循环中执行$x=$x+1一样

---

TBPH，这改变了我对SASS的看法。显然，它比我想象的要编程得多。

考虑到一个元素不能有多个相同的属性组合在一起，而且inherit无法知道当前呈现的状态是什么，您可以选择

1使用SASS变量自己跟踪过去的转换：

2将转换应用于父级，如果需要，可以添加另一个容器：

3使用Javascript将当前转换与要添加的转换结合起来这是确保删除应用于父级的转换（如果需要）的唯一方法：

---

注意：此答案来自一篇合并文章，因为。

此答案专门针对变暗功能：一种可能的替代方法是使用CSS亮度过滤器，而不是SASS或LESS的变暗功能。基本上，您需要将颜色包装在一个span标记中，以便过滤器不会影响其他元素

ul {
    color: red;
}

ol {
    color: blue;
}

li {
    // which color do I inherit from ????
}

简单演示：

.red{color:red} .blue{颜色：blue} .green{color:green} 跨度{ 显示：内联块； 填充：1em； } .暗跨度{ -webkit过滤器：亮度0.4； 滤光片：亮度0.4； } 红色 蓝色 绿色 红色 蓝色 绿色

---

这将是一个很好的功能，但遗憾的是，不使用变量是无法实现的。您是否尝试使用变量来查看发生了什么？我今天尝试过这样做。可悲的是，没有。这个问题问得很好，我自己也一直在想怎么做。如果我发现了什么，我会插话的。我希望CSS的一个特性是内置这个。例如，如果一个框阴影声明必须清除所有以前的框阴影，这是愚蠢的。如果您可以覆盖或附加，那就太好了。如果这是曾经添加到规范，有人让我知道！虽然这似乎可行，但我无法通过答案底部所示的简单整数计算做到这一点。然后看看codepen示例的编译版本，我们看到每个层都根据初始变量变暗。也许SASS的更新以某种方式阻止了这一点，但到今天为止，这并不像文章中所解释的那样起作用。唯一的方法是，如果您使用的自定义不等于，因为这是不可能的，请使用CSS。@Kiliance您已经忽略了第二部分：一个元素不能有两个应用的转换，接下来是如何使用mixin进行组合them@kiliancOP在问为什么他的旋转会打断最初的平移-这个答案表明，多个变换可以组合在一起，因为他正在做

---

这是正确的答案。下次说话前要三思。@kilianc我用一个专门为你准备的用例更新答案！也谢谢你，因为我发现了一个逗号错误，我想我看到了这里出现的混乱-是的，在我的实现中，我使用了compass包含的transform mixin，它应用了供应商前缀。然而，我能够将@include transform指令包含在这个答案所建议的combineTransform mixin解决方案中，因此这个答案与正确的解决方案非常接近，因此我能够实现飞跃。看看这把小提琴，可以找到一个更接近我的原始案例的例子：在现有答案的基础上，这真的增加了什么新的东西吗？我们不需要对每一个可能的CSS属性都有一个新的答案，这些属性可能会产生变量错觉。@cimmanon我想是的。我相信黑暗将是继承最需要的特征，这也是OP提出这个问题的初衷。我的解决方案有更多的浏览器支持，不需要编辑或定义任何变量，它只是动态工作。除了问题不是关于darken之外，darken只是给出的示例。认为颜色操纵是避免使用变量的唯一可能原因，这是非常短视的。@cimmanon我同意你的观点，但我觉得有必要分享一种解决方法或替代方法，因为没有更好的术语，所以没有对当前值的真正操纵。