css - 媒体查询不起作用(Zurb Foundation)

我最近开始使用Zurb Foundation，并尝试使用媒体查询来修改某个.css类，但无法使其正常工作。
以下是（据我所知）.scss文件的相关部分。

// d. Media Query Ranges
// - - - - - - - - - - - - - - - - - - - - - - - - -

// $small-range: (0em, 40em);
// $medium-range: (40.063em, 64em);
// $large-range: (64.063em, 90em);
// $xlarge-range: (90.063em, 120em);
// $xxlarge-range: (120.063em, 99999999em);

$small-range: (0em, 40em);
$medium-range: (40.063em, 64em);
$large-range: (64.063em, 90em);
$xlarge-range: (90.063em, 120em);
$xxlarge-range: (120.063em, 99999999em);

// $screen: "only screen";

$screen: "only screen";

// $landscape: "#{$screen} and (orientation: landscape)";
// $portrait: "#{$screen} and (orientation: portrait)";

// $small-up: $screen;
// $small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";

$small-up: $screen;
$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})";

// $medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
// $medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";

$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})";
$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})";


// $large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
// $large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";

$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})";
$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})";

// $xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})";
// $xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})";

// $xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})";
// $xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})";

// Legacy
// $small: $medium-up;
// $medium: $medium-up;
// $large: $large-up;

$small: $medium-up;
$medium: $medium-up;
$large: $large-up;

@import "settings";
@import "foundation";


@media #{small-up} {
    .blok {
        border-radius: 10px;
        background-color: #000000;
        margin: 0 5px 10px;
        padding: 5px;
        height: 100%;
    }
}

@media #{large-up} {
    .blok {
        border-radius: 10px;
        background-color: $primary-color;
        padding: 5px;
        height: 100%;
    }
}

有人知道我在想什么吗？

提前致谢，

碧玉

最佳答案

@media #{small-up} {

需要是

@media #{$small-up} {

由于$ small-up是您要访问的变量，该变量在设置文件中设置。

关于css - 媒体查询不起作用(Zurb Foundation)，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29929129/