Переопределение определенного стиля в scss

Я хотел бы добавить заявление об отказе от ответственности, что изначально я думал написать это на 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, я подумал, что может быть способ заставить эту работу работать или, по крайней мере, что-то лучше, чем два варианта, которые у меня есть прямо сейчас.

Если ширина ввода - единственная проблема, может быть, стоит поискать решение? Если нет, вы можете добавить класс-модификатор к вводу вместо формы, тогда input.is-small {} ...

sol 26.10.2018 08:27

@sol Входные данные - это одно из изменений, которые необходимо внести.

Leron_says_get_back_Monica 26.10.2018 08:32
2
2
3 748
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Один из вариантов - использовать селектор & в SASS и вложить их следующим образом:

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

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

Таким образом, CSS .small-size применяется только тогда, когда он находится на том же уровне иерархии, что и селектор .regular-form. Это также позволяет вам сохранить HTML как есть:

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

Ага. Я искал именно это. Спасибо.

Leron_says_get_back_Monica 26.10.2018 08:35

Другие вопросы по теме