Question

我正在生成一些边缘顶级实用程序类，并创建了一个sass循环/函数，以px增量为8。

以下是：

@function size($num) {
    @return #{ ( $num * 8 ) }px;
}

@for $i from 1 through 14 {
    .margin-top-#{$i} {
        margin-top: size($i);
    }
    .sm\:margin-top-#{$i} {
        @media all and (max-width: $small-size) {
            margin-top: size($i);
        }
    }
}

将这两者添加到元素时，例如

<div class="list-item margin-top-6 sm:margin-top-3"></div>

具有媒体查询样式的较小类将被初始margin-top-6类覆盖。

如何让sm：class覆盖初始margin-top-6类？

在我看来，由于订购，这应该正常工作。

感谢。

Answer 1

你走在正确的道路上，订购事宜。由于循环生成一般规则，接下来媒体查询所有媒体都可以被任何具有优越数字（后面声明）的一般规则覆盖。这是一个例子：

apply plugin: 'maven-publish'

publishing {
    publications {
        publishToBintray(MavenPublication) {
            from components.java // or use 'artifact jar'
            artifact sourceJar // optional: adds the source JAR artifact
        }
    }
}

bintray {
    publications = ['publishToBintray'] // use the name of the publication above
}

检查.margin-top-1 { margin-top: 8px; } @media all and (max-width: 800px) { .sm\:margin-top-1 { margin-top: 8px; } } .margin-top-2 { margin-top: 16px; } @media all and (max-width: 800px) { .sm\:margin-top-2 { margin-top: 16px; } }是否会覆盖margin-top-2

一种可能的解决方案是将循环分解为两个，这样就可以确保在一般规则之后声明所有媒体查询。这是一个例子：

.sm\:margin-top-1

和working demo。

当与媒体查询一起使用时，通过SASS循环生成的实用程序类不能按预期运行

1 个答案: