我目前在一个使用 SASS 的团队工作。我看到我们正在扩展非常简单的样式,对我来说我看不到这样做的好处。我错过了什么吗?
以下是一些在其他 sass 文件中导入和使用的 _Common.scss 的示例:
.visibility-hidden{visibility: hidden;}
.display-inline { display: inline; }
.display-inline-block { display: inline-block; }
.display-block { display: block; }
.display-none { display: none; }
.display-box { display: box; }
.float-left { float: left; }
.float-right { float: right; }
.clear-both { clear: both; }
.width-percent-100 { width: 100%; }
.width-percent-65 { width: 65%; }
.width-percent-50 { width: 50%; }
.width-percent-45 { width: 45%; }
.width-percent-40 { width: 40%; }
.width-percent-33 { width: 33%; }
.width-percent-30 { width: 30%; }
.width-percent-20 { width: 20%; }
.height-percent-100 { height: 100%; }
.cursor-pointer { cursor: pointer; }
.underline { text-decoration: underline; }
.text-decoration-none { text-decoration: none; }
.bold { font-weight: bold; }
.font-weight-normal { font-weight: normal; }
.text-align-center { text-align: center; }
.text-align-left { text-align: left; }
.text-align-right { text-align: right; }
.font-10 { font-size: 10px; }
.font-11 { font-size: 11px; }
.font-12 { font-size: 12px; }
.font-13 { font-size: 13px; }
.font-14 { font-size: 14px; }
.font-15 { font-size: 15px; }
.font-16 { font-size: 16px; }
.font-17 { font-size: 17px; }
.font-18 { font-size: 18px; }
.font-percent-65 { font-size: 65%; }
.font-percent-80 { font-size: 80%; }
.font-percent-90 { font-size: 90%; }
.font-percent-100 { font-size: 100%; }
.font-percent-110 { font-size: 110%; }
.font-percent-120 { font-size: 120%; }
.font-percent-130 { font-size: 130%; }
.font-percent-140 { font-size: 140%; }
.font-percent-150 { font-size: 150%; }
.font-percent-160 { font-size: 160%; }
.font-percent-170 { font-size: 170%; }
.font-percent-180 { font-size: 180%; }
例子:
#CategoriesContainer
{
ul{
li{
&:first-child{
@extend .font-11;
}
a
{
@extend .font-11;
@extend .text-decoration-none;
}
}
}
}
最佳答案
只有当你有一个将被多次使用的特定属性集时,你才应该使用扩展。用一个具有一个属性的类来扩展一个类,该类的名称中包含单位值,这纯粹是愚蠢的,这是不可理解的。
关于扩展原因的更好示例可以在 reference guide 中找到
假设我们有 2 个类
.error {
border: 1px #f00;
background-color: #fdd;
}
.seriousError {
border-width: 3px;
}
.error
是一种一般的无趣风格,但严重错误应该非常清楚。
.seriousError
创建是为了加粗线条,唯一的问题是现在我们必须在 html 中使用这两个类来组合样式。
因为我们很懒惰,只想使用一个类而不是复制将来可能会更改的代码,所以我们可以扩展 .seriousError
与 .error
.seriousError {
@extend .error;
border-width: 3px;
}
现在我们没有在 sass 文件中复制代码,而是在页面上获得了正确的样式。
查看引用指南以获得更多/更好的示例。
为了小猫,请停止使用一个属性类扩展类。并且不要在选择器中隐式声明值/属性,这不是很语义化。
您和您的团队应该 read this post这解释了您在此处采用的方法与语义代码的一些问题。这么快找不到更好的调整帖子。
关于css - SASS,什么时候扩展?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9828009/