SASS 变量和继承

假设我有两个几乎相同的 HTML 结构，但具有不同的class名称。它们仅存在几个变量不同，例如width and 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;
    }
}

但这似乎相当麻烦。还有其他方法可以实现这项工作吗？

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