Html 在scss中实现此设计的优雅方式是什么？

我已经用html创建了一个显示小部件，我正试图找出一种优雅的方式来设计它。下面是一个JSFIDLE：

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

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

---

但是css定义没有得到应用。这个JSFIDLE还表示css的部分提取。我确信有一种更优雅的方式来实现这个小部件的css，特别是使用SCS。是否有任何scss专业人士可以帮助阐明这一点？

ID是用

选择的，类名是用

选择的

为了你的元素

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

---

ID通过

#

选择，类名通过

选择

为了你的元素

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

根据评论进行编辑：


Scss结构片段：

#VarianceColorKey {
    width: 370px;
    display: table;
    .common {
        display: table-cell;
        line-height: 10px;
        border-color: lightgrey;
        border: 2px solid lightgrey;
    }
    .tableRow {
        display: table-row;
        .moreThanMinus100 {
            background-color: #57595b;
            width: 55px;
        }
        .lessThanMinus100 {
            background-color: #939599;
            width: 110px;
            border-left-width: 0px;
            border-right-width: 0px;
        }
        .noChange {
            background-color: white;
            width: 55px;
        }
        .lessThanPlus100 {
            background-color: #a5c036;
            width: 110px;
            border-left-width: 0px;
            border-right-width: 0px;
        }
        .moreThanPlus100 {
            background-color: #586a30;
            width: 55px;
        }
        .tableCell {
            display: table-cell;
        }
        .textRight {
            text-align: right;
        }
        .textLeft {
            text-align: left;
        }
        .textCenter {
            text-align: center;
        }
    }
    .tr1 {
        line-height: 30px;
        font-size: 16px;
        font-weight: bold;
    }
    .tr2 {
        line-height: 10px;
    }
    .tr3 {
        font-size: 11px;
    }
    .tr4 {
        line-height: 12px;
        font-size: 11px;
    }
    .textRight {
        text-align: right;
    }
    .textLeft {
        text-align: left;
    }
    .textCenter {
        text-align: center;
    }
}


原始答案：


这与Sass无关，至少与共享用户无关
代码
请注意，
#
用于ID，ID是唯一的，因此在本例中，如果希望使用相同的CSS属性影响许多html元素，最好使用类（它们在名称
.class
之前用点声明）
下面是一个建议，将大多数样式放在样式表中，避免将它们嵌入到html中，从而使后者更具可读性/可编辑性
通过使用类，您可以使用
同一类（如
.common
或
.tableCell
）避免重复
其他类中的相同属性


.ColorKeySpectrumWidget{
宽度：370px；
显示：表格；
边界：2px；
}
.普通的{
显示：表格单元格；
线高：10px；
边框：2件纯色浅灰色；
}
tableRow先生{
显示：表格行；
字体大小：粗体；
线高：30px；
}
.表格第2行{
线高：10px；
显示：表格行；
}
.表3{
显示：表格行；
字号：2px；
}
.表格第4行{
显示：表格行；
字体大小：11px；
线高：12px；
}
表细胞{
显示：表格单元格；
}
.textRight{
文本对齐：右对齐；
}
.textlight{
文本对齐：左对齐；
}
.文本中心{
文本对齐：居中；
}
.超过100{
背景色：暗灰色；
宽度：50px；
}
Lessthan先生100{
背景颜色：浅灰色；
宽度：100px；
}
诺切奇先生{
背景色：白色；
宽度：50px；
}
.lessThanPlus100{
背景色：柠檬黄；
宽度：100px；
}
.超过100英镑{
背景色：暗绿色；
宽度：50px；
}

减少
增加
比...更
不
比...更
-100%
改变
+100%
根据评论编辑：


Scss结构片段：

#VarianceColorKey {
    width: 370px;
    display: table;
    .common {
        display: table-cell;
        line-height: 10px;
        border-color: lightgrey;
        border: 2px solid lightgrey;
    }
    .tableRow {
        display: table-row;
        .moreThanMinus100 {
            background-color: #57595b;
            width: 55px;
        }
        .lessThanMinus100 {
            background-color: #939599;
            width: 110px;
            border-left-width: 0px;
            border-right-width: 0px;
        }
        .noChange {
            background-color: white;
            width: 55px;
        }
        .lessThanPlus100 {
            background-color: #a5c036;
            width: 110px;
            border-left-width: 0px;
            border-right-width: 0px;
        }
        .moreThanPlus100 {
            background-color: #586a30;
            width: 55px;
        }
        .tableCell {
            display: table-cell;
        }
        .textRight {
            text-align: right;
        }
        .textLeft {
            text-align: left;
        }
        .textCenter {
            text-align: center;
        }
    }
    .tr1 {
        line-height: 30px;
        font-size: 16px;
        font-weight: bold;
    }
    .tr2 {
        line-height: 10px;
    }
    .tr3 {
        font-size: 11px;
    }
    .tr4 {
        line-height: 12px;
        font-size: 11px;
    }
    .textRight {
        text-align: right;
    }
    .textLeft {
        text-align: left;
    }
    .textCenter {
        text-align: center;
    }
}


原始答案：


这与Sass无关，至少与共享用户无关
代码
请注意，
#
用于ID，ID是唯一的，因此在本例中，如果希望使用相同的CSS属性影响许多html元素，最好使用类（它们在名称
.class
之前用点声明）
下面是一个建议，将大多数样式放在样式表中，避免将它们嵌入到html中，从而使后者更具可读性/可编辑性
通过使用类，您可以使用
同一类（如
.common
或
.tableCell
）避免重复
其他类中的相同属性


.ColorKeySpectrumWidget{
宽度：370px；
显示：表格；
边界：2px；
}
.普通的{
显示：表格单元格；
线高：10px；
边框：2件纯色浅灰色；
}
tableRow先生{
显示：表格行；
字体大小：粗体；
线高：30px；
}
.表格第2行{
线高：10px；
显示：表格行；
}
.表3{
显示：表格行；
字号：2px；
}
.表格第4行{
显示：表格行；
字体大小：11px；
线高：12px；
}
表细胞{
显示：表格单元格；
}
.textRight{
文本对齐：右对齐；
}
.textlight{
文本对齐：左对齐；
}
.文本中心{
文本对齐：居中；
}
.超过100{
背景色：暗灰色；
宽度：50px；
}
Lessthan先生100{
背景颜色：浅灰色；
宽度：100px；
}
诺切奇先生{
背景色：白色；
宽度：50px；
}
.lessThanPlus100{
背景色：柠檬黄；
宽度：100px；
}
.超过100英镑{
背景色：暗绿色；
宽度：50px；
}

减少
增加
比...更
不
比...更
-100%
改变
+100%
谢谢你，西顿。您提供的代码是一个很好的更新。有没有办法嵌套这个css？例如，假设另一个css文件加载到css类为.tableRow的页面上。我希望避免用于我的ColorKeySpectrumWidget的tableRow css与其他css文件中定义的tableRow css之间发生冲突。您可以使用Sass嵌套：-但在您提到的特定情况下，将影响的css要么是最后加载的css，要么是更具特殊性的css（例如.class1 vs body div.class1），后者将覆盖第一个，因为它有一个更深的选择器。您可以在一个样式中放置多个选择器以防止冲突。例如，根据我的面向对象编程背景，这对我来说是一个更理想的sass结构，而不是“.moreThanPlus100”。您能否发布snyden示例的更新，以反映基于我心目中更理想结构的适当sass实现？如果您有更深入的见解或看到更多的机会，请随意进一步优化。@syden感谢您的帮助。我刚刚尝试了你发布的最新迭代。您的原始实现工作正常：.tableR