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

126

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>

Создание интернет-магазина посуды в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

156

javascript

HTML5 Canvas анимация

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

128

javascript

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

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

134

javascript

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

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

147