4

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

变量值首先通过动态创建断点并$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 中的错误？如果我的想法是问题，有没有办法以某种方式实现我想要的？

4

1 回答 1

1

红宝石萨斯是正确的。你的值应该是 0。

LibSass 在功能和行为方面有落后的趋势。它正在模仿 Sass 3.3 的行为，它可以从 mixins/functions 中自由地访问全局变量。没有一种方法可以同时适用于 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; 
        }            
    }
}
于 2014-12-30T13:59:26.883 回答