Question

假设我有两个几乎相同的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;
    }
}

但这看起来非常麻烦。有没有其他方法使这项工作？

Answer 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;
    }
}

Answer 2

遇到同样的问题，这就是我要尝试解决它的问题......（这很有效）

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

    background: $bg

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

Answer 3

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

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

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

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

Answer 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：顾名思义，值是每个选择器的属性值
$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;
}

下载mixin here

SASS变量和继承

4 个答案: