SASS 变量和继承答案

【问题标题】：SASS variables and inheritanceSASS 变量和继承
【发布时间】：2014-09-29 03:54:50
【问题描述】：

假设我有两个几乎相同的 HTML 结构，但有不同的 class 名称。它们只有几个变量不同，例如width 和height。通过使用 SASS/SCSS 变量，我想我可以这样做：

.widget-a {
    $width: 50px;
}

.widget-b {
    $width: 100px;
}

.widget-a,
.widget-b {
    button {
        background: red;
        width: $width;
    }
}

这让我可以为小部件 a 和 b 编写一段 SASS 嵌套代码。但是，变量仅在嵌套范围内可见，因此 SASS 返回“变量未定义”错误。当然，我可以通过简单地执行以下操作来重写它：

.widget-a,
.widget-b {
    button {
        background: red;
    }
}

.widget-a {
    button {
        width: 50px;
    }
}

.widget-b {
    button {
        width: 100px;
    }
}

但这似乎很麻烦。有没有其他方法可以完成这项工作？

【问题讨论】：

你有没有找到干净利落的方法？

标签： css sass nested

【解决方案1】：

SASS 中的变量仅限于它们出现的块。您的第一个 .widget-a 声明和同时声明 A 和 B 的声明是两个独立的范围。您必须这样做（假设您需要多次使用宽度）：

$wbackground: red;

.widget-a {
    $wawidth: 50px; /* widget A width */
    button {
        background: $wbackground;
        width: $wawidth;
    }
}

.widget-b {
    $wbwidth: 100px; /* widget B width */
    button {
        background: $wbackground;
        width: $wbwidth;
    }
}

【讨论】：

是的，但是我需要重述所有声明，这不是很干。我希望有一个更简单的解决方案，不需要重述所有规则。
@Husky 抱歉，我不知道有什么其他方法。或许您可以联系 SASS 团队并请他们考虑您想要什么作为新功能？
感谢您的建议。就这么做了。

【解决方案2】：

遇到了同样的问题，这就是我要尝试解决的方法...（这可行）

@mixin foo($type:"default")
  .mClass
    $bg: inherit
    @if $type == "banana"
      $bg: yellow

    background: $bg

.firstClass
  @include foo
.secondClass
  @include foo("banana")

【讨论】：

【解决方案3】：

您的问题可以通过使用 mixin 来解决。

@mixin button($width){
  button{
    background:red;
    width:$width;
  }
}

.widget-a{ @include button(50px);  }

.widget-b{ @include button(100px); }

【讨论】：

【解决方案4】：

我没有看到仅针对这种特定情况创建 mixin 的优势，它在某些情况下几乎没有用，但这只是我的看法。

无论如何，我创建了一个 mixin，只是为了好玩。我认为它可以帮助您处理这种特定情况。这是mixin，我将尝试解释它是如何工作的：

@include button($selectors, $property, $values, $child: false) {
  // Common properties that are included in all $selectors  
}

这个mixin有四个参数：

$selectors：选择器列表，在您的情况下，.widget-a 和 .widget-b，它们应该用引号括起来。
$property：这里你应该输入属性的名称，在你的情况下是width
$values：Values，顾名思义，就是每个选择器的属性值
$child: 这里可以输入孩子的名字，这个是可选的。
在括号 {} 中你应该写下你想要包含在所有 $parameters 中的所有属性
每个选择器的顺序必须与其对应值的顺序一致

所以，这里有一个使用这个 mixin 来解决你的问题的例子。这是@include：

@include (".widget-a" ".widget-b", width, 50px 100px, button) {
  background: red;
}

还有这个，返回的代码：

.widget-a button, .widget-b button {
  background: red; }

.widget-a button {
  width: 50px; }

.widget-b button {
  width: 100px; }

这是实现相同结果的另一种方法：

@include button(".widget-a .button" ".widget-b .button", width, 50px 100px)  {
  background: red;
}

下载mixinhere

【讨论】：