Sass - 操纵继承的属性(property)?

标签 sass

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

我的目标是这样的:

body
  color: blue
  .warning
    color: red

strong
  color: darken(inherit,20)

最佳答案

继承

没有。 Sass 不“知道”从哪个选择器继承颜色。它必须知道 strongbody 的后代。这对你我来说似乎是一个足够合理的假设,因为 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 变量,则结果应如下所示:

enter image description here

关于Sass - 操纵继承的属性(property)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21336689/

相关文章:

css - 如何根据第 n 个位置添加*渐进式*动画延迟?

css - 将变量的值附加到选择器@如果它存在(使用变量存在)

sass - yeoman 错误 : "Errno::EACCES on line ["89 7"] of C: Permission denied"

javascript - 从另一个目录导入 .scss(sass) 文件?

css - 在 SCSS 中将标签名称嵌套到类样式中

sass - 找不到具有可执行sass的gem sass(> = 0.a)

css - SCSS - 结合/缩短/简化代码与参数?

html - 在 css 转换下消除 ul 高度的波动

sass - 构建 github 页面时出现问题(SCSS 导入失败(Jekyll))

css - Gulp Watch 在 gulp 4.0.2 中无法工作,直到再次运行 gulp