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不知道从哪个选择器继承颜色。它必须知道

strong

是

body

的后代。对你我来说，这似乎是一个足够合理的假设，因为

strong

不允许在身体之外，但对大多数选择器来说，这种假设是不可能的。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.one{
背景：白色；
}
ul.2{
背景：黄色；
}
保险商实验室{
背景：rgba（0,120,255,2）；
填充：1em；
}

福






福

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

以下是解决方案：

如果您的HTML是这样的：

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

SASS似乎不知道它的输出结果。因此，

inherit

对它来说毫无意义。你基本上要求它在输出之前知道输出是什么

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

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

然后是mixin中的变量：

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

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

$x=$x+1

---

TBPH，这改变了我对SASS的看法。它显然比我想象的更具编程性。

鉴于一个元素不能有多个相同的属性组合在一起，而且

inherit

无法知道当前呈现的状态是什么，您可以选择

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

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

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

---

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

此答案专门针对

darken

功能：一种可能的替代方法是使用CSS

brightness（）

过滤器，而不是SASS的

darken（）

功能。基本上，您需要将颜色包装在

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”。@kilian你省略了第二部分：“一个元素不能有两个应用的转换”，接下来是如何使用mixin进行组合them@kiliancOP问为什么他的旋转会打断初始转换-这个答案表明多个转换可以组合在一个中，因为他是在sass中进行的，所以这是正确的答案。下次说话前要三思。@kilianc我用一个专门为你准备的用例更新答案！也谢谢你，因为我发现了一个逗号错误，我想我看到了这里出现的混乱-是的，在我的实现中，我使用了compass包含的transform mixin，它应用了供应商前缀。然而，我能够将@include transform指令包含在这个答案所建议的combineTransform mixin解决方案中，因此这个答案与正确的解决方案非常接近，因此我能够实现飞跃。看这把小提琴，看一个更接近我原来的例子：Does