html - 在 scss 中实现这种设计的优雅方式是什么？

Question

我已经在 html 中创建了一个显示小部件，我正试图找到一种优雅的方式来设置它的样式。这是一个 jsfiddle:

https://jsfiddle.net/fbwu9aoc/3/

我尝试用有意义的类名封装一些样式，例如:

.moreThanMinus100
{
    background-color:darkgray;
    display:table-cell;
    width:50px;
    line-height:10px;
    border:2px solid lightgrey;
}

但是没有应用 css 定义。这个 jsfiddle 也只是 css 的部分提取物。我确信有一种更优雅的方式来为这个小部件实现 css，尤其是在使用 scss 的情况下。是否有任何 scss 专家可以帮助阐明这一点？

Answer 1

用#选择Id，用选择类名。

为你的元素

<div id="moreThanPlus100">&nbsp;</div>

要么改成

<div class="moreThanPlus100">&nbsp;</div>

或将您的CSS更改为

#moreThanPlus100
{
    background-color:darkgreen;
    display:table-cell;
    width:50px;
    line-height:10px;
    border:2px solid lightgrey;
}