SASS variables and inheritance

Question

Suppose I have two virtually identical HTML structures, but with different class names. They only differ by a few variables, like width and h

Answer 1

Variables in SASS are only scoped to the block they appear in. Your first .widget-a declaration and the one declaring both A and B are two separate scopes. You'll have to do something like this (assuming you need to use the widths more than once):

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