使用变量作为mixin数据

时间:2014-04-01 08:26:31

标签: css sass mixins

我正在使用来自csswizardry的网格,并希望创建断点作为变量... 如果定义为标准“字符串”:

$breakpoints: (
    'palm' '(max-width: 480px)'
)!default;

但是当我改为:

$palmmaxwidth: 480px;
$breakpoints: (
    'palm' '(max-width: $palmmaxwidth)'
)!default;

它无法在mixin中正确编译:

@mixin grid-media-query($media-query){
    $breakpoint-found: false;

    @each $breakpoint in $breakpoints{
        $name: nth($breakpoint, 1);
        $declaration: nth($breakpoint, 2);

        @if $media-query == $name and $declaration{
            $breakpoint-found: true;

            @media only screen and #{$declaration}{
                @content;
            }
        }
    }

    @if $breakpoint-found == false{
        @warn "Breakpoint ‘#{$media-query}’ does not exist"
    }
}

错误为Invalid CSS after "...nd (max-width: ": expected expression (e.g. 1px, bold), was "$palmmaxwidth)"

我错过了什么?

1 个答案:

答案 0 :(得分:0)

尝试每种可能的组合后,解决方案非常简单:

$breakpoints: (
    'palm' '(max-width: '+$palmmaxwidth+')'
)!default;