如何访问媒体查询之外的变量？

Question

使用Less。

我希望能够在我的课程中全局使用变量。

假设变量为@globalPadding;

我想使用媒体查询设置填充的大小，如下所示：

@media (min-width: @4ColMin) {

    @globalPadding:@4colPadding;
}

在我的课堂上，只需使用它：padding-top:@globalPadding;

这是否可以使用Less，如果没有，是否还有其他技术可以用来实现相同的东西？

Answer 1

这是一种方式：

@paddingSmallScreen: 20px;
@paddingBigScreen: 40px;

.my-class {
    padding: @paddingSmallScreen;

    @media (min-width: @4ColMin) {
        padding: @paddingBigScreen;
    }
}