文章/答案/技术大牛

发布

社区首页 >问答首页 >转换属性/变量在sass中冲突并相互覆盖

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

Stack Overflow用户

提问于 2017-07-20 00:17:23

回答 1查看 326关注 0票数 1

我在我的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);
        }
    }
}

css

sass

回答 1

Stack Overflow用户

发布于 2017-07-20 17:02:41

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

1)您正在创建360 *4选择器，但您可能只使用其中的10-20个选择器。这有点过火了。

2)正如您所描述的，转换属性值没有很好地“组合”，至少对于您正在寻找的东西是这样的。即使是将实用程序类方法推进得非常深入的atomic CSS，也指定了组合不同的filter值(例如)需要创建自定义值/类。

我知道这真的不是一个好的答案，至少不是你想要的答案，但是如果你想保持你的CSS方法，我建议你在这个问题上采用一种更“面向对象”的方法，并直接在你的对象的css中设置你的transform属性，例如使用下面的混合：

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45195957

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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