Sass - 操纵继承的财产？

Question

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

我的目标是这样的：

body
  color: blue
  .warning
    color: red

strong
  color: darken(inherit,20)

Answer 1

继承

没有。 Sass 不“知道”从哪个选择器继承颜色。它必须知道strong 是body 的后代。这对你和我来说似乎是一个足够合理的假设，因为strong 不允许在身体之外，但是对于大多数选择器，不能做出这种假设。 Sass 还必须知道其他祖先元素不会发生级联。

ul {
    color: red;
}

ol {
    color: blue;
}

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

我可以指定哪个选择器我想复制吗？

Sass 也不授予以任何方式访问任何先前声明的变量的值的权限。没有办法指定“比身体的颜色更暗”。 CSS 规则不是对象或映射，不能以任何方式访问。您的案例可能很简单，但考虑一个更复杂的案例，如下所示：

.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 ????
}

那么可以做什么？

你要么需要使用变量，要么它必须是 vanilla CSS 的一个特性才能做你想做的事情。

老式 CSS

某些属性可能会产生使用浏览器支持年的东西动态生成/继承的错觉：

ul.one {
  background: white;
}

ul.two {
  background: yellow;
}

ul {
  background: rgba(0, 120, 255, .2);
  padding: 1em;
}

<ul class="one">
  <li><ul>
    <li><ul>
      <li>Foo</li>
    </ul></li>
  </ul></li>
</ul>

<ul class="two">
  <li><ul>
    <li><ul>
      <li>Foo</li>
    </ul></li>
  </ul></li>
</ul>

CSS 变量

生成 CSS 变量几乎与您能够操作继承的属性一样接近。浏览器支持还不是很完善（检查caniuse），但看起来是这样的：

萨斯：

ul {
  --list-color: orange;
  --darker-color: darken(orange, 15%);
  color: var(--list-color);
}

ol {
  --list-color: green;
  --darker-color: darken(green, 10%);
  color: var(--list-color);
}

li {
  background: var(--darker-color);
}

输出：

ul {
  --list-color: orange;
  --darker-color: #b37400;
  color: var(--list-color);
}

ol {
  --list-color: green;
  --darker-color: #004d00;
  color: var(--list-color);
}

li {
  background: var(--darker-color);
}

<ul>
  <li>Foo</li>
</ul>

<ol>
  <li>Bar</li>
</ol>

如果您使用的浏览器支持 CSS 变量，结果应如下所示：

Answer 2

我正在寻找同样的东西，并遇到了这个。您的问题已得到解答，但并未解决问题。

这里是解决方案：http://codepen.io/monsto/pen/tiokl

如果你的 HTML 是这样的：

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

然后使用 SASS 你可以这样做：

$bg: #f88;

@mixin colorize {
  $bg: darken($bg,15%) !global; // !global flag required for 3.4 or later, remove if using 3.3 or older
  background: $bg;
}

.warning {
  background: $bg;
  p {
    @include colorize;
    strong {
      @include colorize;
    }
  }
}

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

但它确实知道它是变量，因为默认情况下，它们的范围很窄。 来自文档：

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

在 mixins 中的 AND THEN 变量：

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

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

_{TBPH，这反而改变了我对 SASS 的看法。这显然比我想象的要程序化得多。}

Answer 3

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

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

.parent {
  $firstTrans: translateX(50%);
  transform: $firstTrans;

  .child {
    /* Old followed by new */
    transform: $firstTrans rotate(10deg);
  }
}

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

3) 使用 Javascript 将当前转换与您要添加的转换相结合（这是确保删除应用于父级的转换的唯一方法）：Demo

注意：由于this meta post，此答案来自合并帖子。

Answer 4

此答案专门针对 darken 函数：一种可能的替代方法是使用 CSS brightness() 过滤器而不是 SASS 的（或 LESS 的）darken() 函数。您基本上需要将颜色包裹在 span 标记内，这样过滤器就不会影响其他元素。

简单演示：

.red {color: red}
.blue {color: blue}
.green {color: green}

span {
  display: inline-block;
  padding: 1em;
}

.darken span {
  -webkit-filter: brightness(0.4);
  filter: brightness(0.4);
}

<span class="red">Red</span>
<span class="blue">Blue</span>
<span class="green">Green</span>

<div class="darken">
  <span class="red">Red</span>
  <span class="blue">Blue</span>
  <span class="green">Green</span>
</div>

jsFiddle：https://jsfiddle.net/azizn/hhorhz9s/

您需要牢记浏览器兼容性，它应该适用于 IE Edge、最新的 Firefox 和 Chrome。请参阅caniuse 或MDN 了解更多信息。

在背景变暗的情况下，您可以使用具有不透明度的伪选择器或添加半透明的黑色 PNG 背景图像。