继承

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对此毫无意义。你基本上要求它在输出之前知道输出是什么。

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

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

mix中的

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＆＃39; s）darken()函数。您基本上需要将颜色包装在span标记内，以便过滤器不会影响其他元素。

简单演示：

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

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

您需要牢记浏览器兼容性，它应该适用于IE Edge，最新的Firefox和Chrome。有关详细信息，请参阅caniuse或MDN。

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

Sass - 操纵继承的财产？

4 个答案:

继承

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

可以我做什么？

老式CSS

CSS变量