时间戳

首页 > 解决方案 > 合并声明块

css - 合并声明块

问题描述

我试图找出使用 CSS 锐化图像的方法，我发现了这个例子。

.sharpen {
 mix-blend-mode: hard-light;

 &,
 &::before,
 &::after {
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
 }

 &::before,
 &::after {
   content: '';
   background: url('https://source.unsplash.com/iI72r3gSwWY/750') no-repeat;
 }

 &::after {
   filter: invert(1);
   opacity: 0.5;
   top: -1px; left: -1px;
 }
}

在 CSS 样式表中，有三个伪元素:before，:after如果产生相同的图像效果，我将它们合并为一个：

.sharpen {
 mix-blend-mode: hard-light;

 &,
 &::before,
 &::after {
   position: absolute;
   top: 0; right: 0; bottom: 0; left: 0;
   content: '';
   background: url('https://source.unsplash.com/iI72r3gSwWY/750') no-repeat;
   filter: invert(1);
   opacity: 0.5;
   top: -1px; left: -1px;
 }

但是，它不会创建与原始图像相同的图像效果。我的问题是

1）为什么需要三个单独:after的选择器来创建效果？

2）有没有更简单的方法可以在 CSS 中实现相同的效果？

标签： csssass

解决方案

.sharpen {
 mix-blend-mode: hard-light;

 &,
 &::before,
 &::after {
   /** those rules will be applied to '&' AND '&::before' AND '&::after' */
 }

 &::before,
 &::after {
   /** those rules will be applied to '&::before' AND '&::after' */
 }

 &::after {
   /** those rules will ONLY be applied to '&::after' */
 }
}

1）它需要3个单独的块，因为有些规则只需要应用于::after，而有些需要只应用于::before和::after，而有些需要应用于元素，即： :after 和 ::before

2）根据我对问题的理解，这是实现这种特殊效果的最简单方法。如果不是最简单的，它是一个非常简单的。

推荐阅读