Как я могу сократить css-код от повторяющегося идентификатора (css)

Question

Как я могу сократить свой код CSS?

HTML:

<div id="root">
    <p>Green</p>
    <h1>Blue</h1>
    <h3 class="brown">Brown</h3>
</div>

CSS:

#root p{ color:green; }

#root h1{ color:blue; }

#root .brown{ color:brown; }

Я знаю, что приведенные выше коды работают нормально.

Но я могу просто подумать , если есть какой-либо способ сократить код CSS выше . Я попробовал это (ниже), но не сработало.

#root{
  p{ color:green; },
  h1{ color:blue; },
  .brown{ color:brown; }
}

Может кто-нибудь дать мне демо-версию (codepen) о том, как это сделать. Нужна ваша помощь, сэр ..

Answer 1

Как уже упоминалось в других комментариях, SASS идеально подходит для написания вложенных объявлений CSS. Обратите внимание, что это препроцессор , поэтому окончательный код CSS будет скомпилирован. Я предполагаю, что результат этого кода sass:

#root{
  p{ color:green; }
  h1{ color:blue; }
  .brown{ color:brown; }
}

приведет к вашему примеру в качестве вывода.

Просто говорю это, потому что важно знать, что конечный файл не обязательно будет меньше.

Answer 2

Вы можете достичь этого, например, с помощью SASS.

#root {
  p {color: green;}
  & h1 {color: blue;} 
  & h3 {color: brown;}
}

Вы можете проверить это здесь, чтобы увидеть, как оно работает: https://www.sassmeister.com/

Зайдите сюда, чтобы узнать, как установить его в свой проект: https://sass -lang.com / install

Вот как это будет выглядеть в css, но с использованием SASS

Answer 3

Вы можете вложить CSS в SCSS следующим образом с родительским селектором снаружи. В нашем случае это #root. Внутри него есть фигурные скобки, мы можем объявить дочерние селекторы #root.

Используйте node-sass для компиляции файла sass в css

SCSS

#root{
  p{ color:green; }
  h1{ color:blue; }
  .brown{ color:brown; }
}

Скомпилированный CSS

#root p {
  color: green;
}
#root h1 {
  color: blue;
}
#root .brown {
  color: brown;
}

Answer 4

На самом деле вы можете делать это в SASS почти точно так же, как пытались сократить его в CSS, просто без запятой

#root{
  p{ color:green; }
  h1{ color:blue; }
  .brown{ color:brown; }
}

Здесь у вас есть ссылка на официальное руководство> https://sass -lang.com /руководство

Answer 5

Мой ответ такой же описательный, как и Ваши вопросы.Вот, пожалуйста:

p{color:#0f0}h1{color:#00f}.brown{color:brown}

;)