使用 css 网格重新排序 html 计算器按钮（使用 sass）

Question

大家好我想弄清楚为什么 CSS 网格不重新排序我的计算器按钮。我应该得到的是这样的东西：

7 8 9 /
4 5 6 *
1 2 3 -
0 + = del

或者我刚收到 HTML 订单。网格不会重新排序项目吗？（我很清楚其他方法可以做到这一点，我想弄清楚为什么网格没有像我认为的那样工作......）

See full code on Codepen

这是 HTML 代码：

 <main class="calculator">
    <div class="result_screen"> </div>
    <div class="enter_screen"> </div>
    <div class="keyboard"> <button type="button" value="0" class="zero">0</button>
        <button type="button" value="1" class="one">1</button>
        <button type="button" value="2" class="two">2</button>
        <button type="button" value="3" class="three">3</button>
        <button type="button" value="4" class="four">4</button>
        <button type="button" value="5" class="five">5</button>
        <button type="button" value="6" class="six">6</button>
        <button type="button" value="7" class="seven">7</button>
        <button type="button" value="8" class="eight">8</button>
        <button type="button" value="9" class="nine">9</button>
        <button type="button" value="/" class="divide">\</button>
        <button type="button" value="*" class="multiply">*</button>
        <button type="button" value="-" class="minus">-</button>
        <button type="button" value="del" class="delete">C</button>
        <button type="button" value="=" class="equal">=</button>
        <button type="button" value="+" class="plus">+</button>
    </div>
</main>

这是 SCSS :

    @mixin attribZones($zone) {
    .#{$zone} {
        grid-area: $zone;
    }
}


$zones: "zero",
"one",
"two",
"three",
"four",
"five",
"six",
"seven",
"eight",
"nine",
"divide",
"multiply",
"minus",
"delete",
"equal",
"plus";

@each $zone in $zones {
    @include attribZones($zone);
}

.keyboard {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
        "seven eight nine divide"
        "four five six multiply"
        "one two three minus"
        "zero plus equal delete"
}

Answer 1

您需要在定义 $zones 时删除引号。

$zones: zero,
one,
two,
three,
four,
five,
six,
seven,
eight,
nine,
divide,
multiply,
minus,
delete,
equal,
plus;

因为当您将 grid-area 设置为 $zone 时，您实际上是将其设置为 "one"、"two"... 这些无效值必须是 one, two ...

使用 css 网格重新排序 html 计算器按钮（使用 sass）

Reordering html calculator buttons with css grid (using sass)

html

css

sass

css-grid