未定义的操作："500px gte medium-screens"

Question

我正在尝试将杰克·阿奇博尔德（Jake Archibald）的移动友好型IE SASS MIXINS ... http://jakearchearchibald.github.io/sass-ie ...丹·塞德霍尔姆（Dan Cederholm）在他的书《网络设计师的Sass》中。我正在使用Codekit编译文件（下面详细介绍）。

all.scss成功编译，但是All-Old-ie.scs失败了。Codekit说：

错误：未定义的操作：" 500px GTE中型屏幕"。

在/applications/mamp/htdocs/sass-ie-test/sass/_utils.scss上，在"响应式"

中

of/applications/mamp/htdocs/sass-ie-test/sass/_layout.scss

来自/applications/mamp/htdocs/sass-ie-test/sass/all.scss

的第2行

来自/applications/mamp/htdocs/sass-ie-test/sass/all-old-ie.scss

的第3行

使用 - 跟踪进行回溯。

不确定这里发生了什么。我的文件是：

_utils.scss

$medium: 600px;
$large: 950px;
$fix-mqs: false !default;
@mixin responsive($width) {
    @if $fix-mqs {
        @if $fix-mqs >= $width {
            @content;
        }
    }
    @else if $width == medium-screens {
        @media only screen and (min-width: $medium) { 
            @content;
        }
    }
    @else if $width == large-screens {
        @media only screen and (min-width: $large) { 
            @content;
        }
    }
}
$old-ie: false !default;
@mixin old-ie {
    @if $old-ie {
        @content;
    }
}

_Layout.scss

article {
    padding: 30px;
    @include responsive(medium-screens) {
        padding: 50px;
    }
    @include responsive(large-screens) {
        padding: 70px;
    }
    @include old-ie {
        //stuff for ie
    }
}

all.scss

@import 'utils';
@import 'layout';

All-em-ie.scss

$old-ie: true;
$fix-mqs: 500px;
@import 'all';

Answer 1

此处的错误很明显。它明确指出，它不能确定数字500px是否大于或等于（gte）与字符串medium-screens。

您试图无缘无故地过度拼写问题：只需使用变量。

$medium: 600px;
$large: 950px;
@mixin responsive($width) {
    @if $fix-mqs {
        @if $fix-mqs >= $width {
            @content;
        }
    } @else {
        @media only screen and (min-width: $width) { 
            @content;
        }
    }
}
article {
    padding: 30px;
    @include responsive($medium) {
        padding: 50px;
    }
    @include responsive($large) {
        padding: 70px;
    }
    @include old-ie {
        //stuff for ie
    }
}