Question

我正在创建一个具有特定问题的SCSS网格 - 我想使用一个变量名称，例如$pad（用于填充值），但$pad变量需要在不同的不同媒体断点。

变量值首先通过mixins设置，它们动态创建断点并在其中设置$pad值。

// Default value
$pad: 0;

@mixin resolution($breakpointName, someOtherValues) { 

    @if ($breakpointName == 'mobile') {
        @media (min-width: 320px) and (max-width: 520px) {   
            $pad: 20px;

            @content; 
        }
    }
    @else {
        @media (min-width: 521px) {   
            $pad: 30px;

            @content; 
        }            
    }
}

当我开始编写代码时，我想像这样使用它

@include resolution(mobile) {
     .test {
         padding: $pad;
     }
}

这是问题所在。使用libsass（NPM gulp-sass）时，变量$pad按照我的意图传递，并输出以下CSS

// THIS IS OK - gulp-sass
@media (min-width: 320px) and (max-width: 520px) {
    .test {
        padding: 20px;
    }
}

但如果我使用最新的Ruby SASS通过NPM gulp-ruby-sass编译CSS，它只输出$pad的默认值

// THIS IS WRONG - gulp-ruby-sass 
@media (min-width: 320px) and (max-width: 520px) {
    .test {
        padding: 0;
    }
}

这里的问题在哪里？这是我的想法还是libsass或ruby sass中的错误？如果我的想法是问题，有没有办法实现我想要的方式？

Answer 1

Ruby Sass是正确的。你的价值应该是0。

LibSass倾向于在功能和行为上落后。它模仿Sass 3.3的行为，它可以从mixins /函数中自由访问全局变量。没有一种方法可以使用Sass 3.4 和 LibSass。您需要用来访问全局变量的语法不向后兼容。

要么下载到Sass 3.3（并使用已弃用的警告），要么忘记使用LibSass。

你的mixin需要看起来像Sass 3.4才能按照需要工作：

@mixin resolution($breakpointName) { 

    @if ($breakpointName == 'mobile') {
        @media (min-width: 320px) and (max-width: 520px) {   
            $pad: 20px !global;

            @content; 
        }
    }
    @else {
        @media (min-width: 521px) {   
            $pad: 30px !global;

            @content; 
        }            
    }
}

SCSS变量 - 同名，不同媒体断点中的不同值

1 个答案: