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

我正在创建一个带有特定问题的SCSS网格-我想使用一个变量名，例如

$pad

（用于填充值），但是

$pad

变量在不同的媒体断点中需要不同

变量值首先通过动态创建断点并在其中设置

$pad

值的out mixin进行设置

// 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中的bug？

---

如果我的想法是个问题，有没有办法实现我想要的

Ruby Sass是正确的。您的值应该是0

LibSass在特性和行为上有落后的倾向。它正在模拟Sass 3.3的行为，Sass 3.3可以从mixin/函数中自由访问全局变量。没有一种方法可以同时适用于Sass 3.4和LibSass。访问全局变量所需的语法不向后兼容

要么下拉到Sass 3.3（并使用不推荐的警告），要么忘记使用LibSass

要使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; 
        }            
    }
}

---

谢谢，就是这个。看来Libsas接受了！global，至少它没有问题，所以这个修复程序可以。值得一提的是，它正在演示LibSass（3.1）的beta版，并且它看起来好像没有被

阻塞！global

标志与以前一样。在Ruby Sass 3.4.9（选择性史蒂夫）中按预期工作，在gulp Sass v1.2.4中解析时不会出现问题。我将大的SCSS文件与许多类似的混合文件进行了比较，输出的CSS文件是相同的。这就是我一直在寻找的解决方案，再次感谢Cimmanon:）