Question

我的sass页面底部有代码。在我的HTML中，我将其定位如下

class=" transform rotate-5 zoom-2 ......"

问题是变换属性是冲突的，并且没有应用缩放和旋转到相同的div标签，我要么得到一个或另一个。我想我可以通过使用@extend属性来改变它，

&.rotate-#{$i}
 {@extend &.skew-#{$i}, &.zoom-#{$i}, &.zoom--#{$i};
            transform: rotate($rotate#{deg});
        }

但到目前为止，我没有运气，如果有人能帮忙，我会非常感激。

.transform {

    overflow:hidden;

    @for $i from 1 through 360 {

        $rotate: $i;
        $skew: $i;
        $zoom: $i;

        &.rotate-#{$i} {
            transform: rotate($rotate#{deg});
        }

        &.skew-#{$i} { 
            transform: skew($skew#{deg});
        }
        &.zoom-#{$i} { 
            transform: scale($zoom,0);
        }

        &.zoom--#{$i} { 
            transform: scale(-$zoom,0);
        }
    }
}

Answer 1

我是实用程序类的忠实粉丝，我认为它更容易调试和构建。但在这里它似乎并不是一个好主意：

1）您正在创建360 * 4选择器，但您可能只使用10-20个选择器。这有点矫枉过正。

2）正如您所描述的那样，转换属性值不会＆＃34;组合＆＃34;好吧，至少你正在寻找什么。即使是atomic CSS，它推动了实用程序类的实现，但是组合filter的不同值（例如）需要创建自定义值/类。

我知道这不是一个好的答案，至少不是你想要的答案，但是如果你想保持你的CSS方法，我建议你采用更多＆＃34;面向对象＆＃34 ;此问题的方法并直接在对象的css中设置转换属性，例如使用此mixin：

@mixin transform($rotate, $skew, $zoom) {
  transform: rotate($rotate#{deg}) skew($skew#{deg}) scale($zoom,0) scale(-$zoom,0);
}

转换属性/变量在sass中发生冲突并相互覆盖

1 个答案: