css - SASS 变量和继承

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 中的变量仅作用于它们出现的 block 。您的第一个 .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;
    }
}