Переопределение определенного стиля в 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">