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没有任何意义.你基本上要求它在输出之前知道输出是什么.

然而它确实知道它的变量,因为默认情况下它们是严格限定的.来自文档:

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

混合中的那些变量:

传递给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)将转换应用于父级(如果需要,可能添加另一个容器):演示

3)使用Javascript将当前变换与您要添加的变换相结合(这是您可以确保删除应用于父变换的唯一方法,如果需要):演示

注意:由于此帖子,此答案来自合并后的帖子.