Question

我想添加一个免责声明，起初我想将其写在code review中，但是由于我无法提供完整的工作代码，因此我决定SO会更好这个问题的地方。

话虽这么说，我有一个表格（更复杂，但我认为这已经足够了）

<form class="regular-form">
    <label for="fname">First Name</label>
    <input type="text" id="fname" name="firstname" placeholder="Your name..">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="lastname" placeholder="Your last name..">

    <input type="submit" value="Submit">
</form>

.regular-form驻留在其自己的文件regular-form.css.scss中，并描述了网站上所有表单的通用样式。更具体地说，我们有这个：

.regular-form {
  ..
  input { width: 100%; }
}

但是在某些地方width: 100%不太适合，因此我需要减少它，但仍要在网站上保持通用的外观，这意味着我希望将样式应用于需要到处都变得更紧密。

我通过引入新的类.small-size解决了这个问题，我的问题是关于这个新类的用法。

最终我希望能够做到这一点：

<form class="regular-form small-size">

但是，由于我对SASS/scss的了解有限，因此，实现此行为的唯一方法是在.small-size样式下方的regular-form.css.scss文件内添加.regular-form类，如下所示

.regular-form {
  ..
  input { width: 100%; }
}

.small-size { 
  input { width: 50%; }
}

并且将.small-size放在.regular-form类之后，我将能够在相同级别上应用它们。但是，这种继续保持这种顺序的感觉感觉是错误的方法。如果有人稍后再进行一些更改，以使顺序不再保留，那么表格的外观就会看起来很不一样，我认为这是这种方法的主要缺点。

我能想到的第二种方法是像这样将.small-size类嵌套在.regular form内

.regular-form {
  ..
  input { width: 100%; }
  .small-size { 
    input { width: 50% }
  }
}

现在，我更加确信样式不会轻易中断，如果以后有人更改样式，他很可能会考虑.small-size是嵌套的，并会检查其用法，但是，如果我选择这种方法，到目前为止，我发现要实施.small-size样式的唯一方法是将新的<div>引入这样的形式

<form class="regular-form">
  <div class="small-size">
    <label for="fname">First Name</label>
    ..
  </div>
</form>

但是现在我要更改现有的DOM结构，并使应用新样式的过程更加困难。

最终我想拥有的是这样的嵌套类：

.regular-form {
  ..
  input { width: 100%; }
  .small-size { 
    input { width: 50% }
  }
}

并且能够像这样应用样式

<form class="regular-form small-size">

我知道这与一般的CSS规则有些矛盾，但是由于我在这里写scss，所以我认为可能有一种方法可以使这项工作奏效，或者至少有比这更好的方法我现在有两个选择。

Answer 1

一种选择是在SASS中使用&选择器并像这样嵌套它们：

.regular-form {
    input { 
        width: 100%; 
    }

    &.small-size {
        input { 
            width: 50%; 
        }
    } 
}

这样，仅当.small-size CSS与.regular-form选择器处于同一层次结构级别时，才应用CSS。这也使您能够按原样保留HTML：

<form class="regular-form small-size">

覆盖SCSS中的某些样式

1 个答案: