css - 覆盖 SCSS 中的某些样式

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 选择器处于同一层级时才应用。这也使您能够保持 HTML 原样:

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