在 Sass 中,是否可以操作给定元素已经继承的值?
我的目标是这样的:
body
color: blue
.warning
color: red
strong
color: darken(inherit,20)
最佳答案
继承
没有。 Sass 不“知道”从哪个选择器继承颜色。它必须知道 strong
是 body
的后代。这对你我来说似乎是一个足够合理的假设,因为 strong
不允许在 body 之外,但这种假设不能对大多数选择器做出。 Sass 还必须知道其他祖先元素没有发生级联。
ul {
color: red;
}
ol {
color: blue;
}
li {
// which color do I inherit from ????
}
我可以指定我想从哪个选择器复制吗?
Sass 也不会以任何方式授予对任何先前声明的变量值的访问权限。没有办法指定“比 body 的颜色深”。 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 变量,则结果应如下所示:
关于Sass - 操纵继承的属性(property)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21336689/