ссылка одного CSS внутри другого CSS

166
02 октября 2019, 12:20

Вопрос чисто теоретический и простой, но в интернетах не нашел. Как реализовать вот это:

.leftBlock{
  background-color: yellow;
  width: 300px;
  //myPadding
}
myPadding{
  padding-left: 10px;
}

То есть, когда элементов мало можно это без проблем вручную прописать, но если много, то напряжно. Как правильно ссылаться на другие .css ?

Answer 1

Можно использовать переменные в этом случае. Например вот так:

<style>
      * {
        margin: 0;
        padding: 0;
        --standart-padding: 1.5em;
      }
      .container {
        width: 100%;
        background: #222;
        overflow: hidden;
      }
      .template {
        width: 80%;
        margin: 40px auto;
        background: #999;
        padding: var(--standart-padding);
      }
      .another {
        width: 40%;
        margin-left: 10%;
        padding: var(--standart-padding);
        background: #777;
      }
    </style>
    <section class="container">
      <article class="template">
        <h3>Title</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quas
          quod sed velit, dignissimos autem ducimus, voluptates dolor eius,
          omnis nisi! Laudantium.
        </p>
      </article>
      <article class="template">
        <h3>Title</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quas
          quod sed velit, dignissimos autem ducimus, voluptates dolor eius,
          omnis nisi! Laudantium.
        </p>
      </article>
      <article class="template">
        <h3>Title</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quas
          quod sed velit, dignissimos autem ducimus, voluptates dolor eius,
          omnis nisi! Laudantium.
        </p>
      </article>
      <article class="another">
        <h3>Title</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo quas
          quod sed velit, dignissimos autem ducimus, voluptates dolor eius,
          omnis nisi! Laudantium.
        </p>
      </article>
    </section>
READ ALSO
Как вырезать два небольших сегмента из окружности и вращать их при наведении курсора
CSS

Как вырезать два небольших сегмента из окружности и вращать их при наведении курсора

На многих сайтах стали появляться эффекты вращения окружностей с симметрично вырезанными небольшими участкамиСмотрится хорошо

 194
HTML5 Canvas анимация
javascript

HTML5 Canvas анимация

Возникла такая трудность вывожу на экран(в canvas html5) массив объектов, и мне как то надо задать этим объектам разную скорость вращенияКак это...

 158
Vue, vuetify и список для справочников
javascript

Vue, vuetify и список для справочников

Есть вот такой интерфейсСлева справочники, вот думаю как сделать чтобы там был список справочников, чтобы пользователь мог выбрать любой...

 171
Поменять дату по нажатию на button
javascript

Поменять дату по нажатию на button

Есть график на котором можно выбирать диапазон например с 2010-1-01 по 2020-2-02Я попытался сделать чтоб по нажатию на кнопку забивалась конкретная...

 228