Sass-处理继承的财产？

ass CSS

乐古一

2020-03-20

在Sass中，是否有可能操纵给定元素已经继承的值？

我的目标是这样的：

body
  color: blue
  .warning
    color: red

strong
  color: darken(inherit,20)

第2455篇《Sass-处理继承的财产？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答
十三Mandy 2020.03.20

鉴于一个元素不能具有多个相同的组合属性，并且inherit不能知道当前呈现的状态是什么，您可以选择

1）使用SASS变量跟踪过去的变化自己：演示

.parent {
  $firstTrans: translateX(50%);
  transform: $firstTrans;

  .child {
    /* Old followed by new */
    transform: $firstTrans rotate(10deg);
  }
}

2）将转换应用于父对象（可能需要添加另一个容器）：演示

3）使用Javascript将当前转换与您要添加的转换结合起来（如果需要，这是确保删除应用于父级的转换的唯一方法）：演示

注意：由于此元帖子，此答案来自合并后的帖子。

Harry飞云 2020.03.20

该答案darken专门针对该功能：一种可能的替代方法是使用CSS brightness()过滤器代替SASS（或LESS）darken()功能。基本上，您将需要将颜色包装在span标签内，以便滤镜不会影响其他元素。

简单的演示：

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

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

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

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

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android