Sass – 操纵inheritance的属性？
在Sass中，是否有可能操纵已经inheritance的给定元素的值？
我的目标是这样的：
body color: blue .warning color: red strong color: darken(inherit,20) 遗产
不，Sass不知道从哪个select器inheritance颜色。 它必须知道strong是body的后裔。 这对我们来说似乎是一个足够合理的假设，因为在身体之外不允许strong ，但是对于大多数select者来说，这种假设是不可能的。 Sass也必须知道其他祖先元素没有发生级联。
ul { color: red; } ol { color: blue; } li { // which color do I inherit from ???? }
那么我可以指定我想从哪个select器复制？
Sass不以任何方式授予访问任何先前声明的variables的值。 没有办法指定“比身体的颜色更深”。 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 ???? }
那么我能做什么？
你要么需要使用variables，要么必须是香草CSS的function来做你想做的事情。
老式的CSS
一些属性可以给出使用浏览器支持多年的内容dynamic生成/inheritance的错觉：
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>
我正在寻找同样的东西，并碰到这个。 你的问题已经回答了，但是没有解决问题。
这是解决scheme： 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意味着什么。 你基本上要求它在输出之前知道输出是什么。
但是，它确实知道它是variables，因为默认情况下它们的范围很广。 从文档：
variables只能在定义它们的嵌套select器的级别内使用。 如果它们是在任何嵌套select器之外定义的，则它们在任何地方都可用。
然后在mixins中的variables：
传递给mixin的内容块在块定义的范围内进行评估，而不是在mixin的范围内。
这允许上面的mixin采用父级中定义的已知variables，并将其重新定义为当前级别，并可供其孩子使用。 这就像在多嵌套循环中做$x = $x + 1一样
TBPH，这改变了我对SASS的看法。 这显然比我想像的要多得多。
鉴于一个元素不能有多个相同的属性组合，并且inherit不能知道当前呈现状态是什么，你的select是
1）跟踪过去使用SASSvariables转换自己： 演示
.parent { $firstTrans: translateX(50%); transform: $firstTrans; .child { /* Old followed by new */ transform: $firstTrans rotate(10deg); } }
2）将变换应用到父级（可能需要添加另一个容器）： Demo
3）使用Javascript来结合当前的变换和你想添加的变换（这是唯一的方法，你可以确保删除应用到父变换，如果需要的话）： Demo
注意 ：这个答案来自合并的post，因为这个meta post 。
这个答案专门讨论了darken函数：一种可能的替代方法是使用CSS brightness()filter，而不是SASS（或LESS）的darken()函数。 您基本上需要将颜色包裹在span标签中，以便filter不会影响其他元素。
简单演示：
.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>
