在 mixin 中调用类变量 - Sass答案

【问题标题】：Call class variable insida a mixin - Sass在 mixin 中调用类变量 - Sass
【发布时间】：2013-12-12 02:46:21
【问题描述】：

我有 2 个设置标题样式的类。然后我需要创建一个 mixin 来自定义背景模式，具体取决于显示的标题。

是否可以在我的 mixin 中使用 $has-dept 变量？

    //header 1
     .dt-style-user-bar-without-departments {
          @extend .dt-style-user-bar;
          $has-dept: false;
          /...
    }

    //header 2
    .dt-style-user-bar-with-departments {
          @extend .dt-style-user-bar;
          $has-dept: false;
          //...
    }

    //intending to get $has-dept var to give the proper background color   
    @mixin set-reveal-bg-color(){
          @extend $has-dept;
          @if $has-dept {
            background: green !important;
          }
          @else {
            background: blue !important;
          }
    }

   //prints the background color in the modal overlay class
    .reveal-modal-bg{
      @include set-reveal-bg-color()
    }

*输出：错误 scss/app.scss（scss/_dt_style.scss 的第 471 行：未定义变量：“$has-dept”。）*

【问题讨论】：

您不能将@extend 指令用于变量，它仅适用于选择器。来自SASS reference：@extend 指令通过告诉 Sass 一个 selector 应该继承另一个 selector [...] 的样式来避免这些问题
你能用 CSS 展示你想要实现的目标吗？

标签： sass zurb-foundation frontend

【解决方案1】：

是的。只需像这样启用变量插值：

@extend #{$has-dept};

这使得 Sass 可以在此处评估变量的值。

这里有更多关于 Sass 插值的内容：http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_

【讨论】：