Есть ли способ использовать все свойство css и значение для другого css в одной строке?

Question

Посмотрите на эти коды:

.hero-text-box a {
    color: #fff;
    font-size: 1.6rem;
    text-decoration: none;
    text-transform: uppercase;
    padding: 1.8rem 10rem;
    background: #eb7d4d;
    border-radius: 0.5rem;
    border-bottom: 0.5rem solid #c86a43;
}

Я хочу скопировать все свойства и значения в другой селектор css. см. код ниже:

.row-3 input {

    .hero-text-box a 
}

Возможно ли это? или другой способ сделать это?

Answer 1

Нет, вы не можете этого сделать.

Однако вы можете использовать несколько селекторов для одного блока объявления (через запятую). Это должно привести к желаемому результату:

.hero-text-box a, .row-3 input {
    color: #fff;
    font-size: 1.6rem;
    text-decoration: none;
    text-transform: uppercase;
    padding: 1.8rem 10rem;
    background: #eb7d4d;
    border-radius: 0.5rem;
    border-bottom: 0.5rem solid #c86a43;
  }

Дополнительная информация о запятых: https://www.lifewire.com/comma-in-css-selectors-3467052

Другие ответы ссылаются на SASS , который является расширением CSS, который имеет некоторые дополнительные методы достижения того же результата.

Answer 2

Вы можете использовать @ extend в S CSS. Но не может расширять вложенные селекторы. Итак, вы не можете расширяться до .hero-text-box a. Вы можете расширить это так:

Вход:

.hero-text-box {
  color: #fff;
  font-size: 1.6rem;
  text-decoration: none;
}


.row-3 input {
  @extend .hero-text-box;
  color:red;
}

Выход:

.hero-text-box, .row-3 input {
  color: #fff;
  font-size: 1.6rem;
  text-decoration: none;
}

.row-3 input {
  color: red;
}

Или вы можете использовать @ mixin

Вход

@mixin myProperties {
  color: #fff;
  font-size: 1.6rem;
  text-decoration: none;
}

.hero-text-box a {
  @include myProperties;
}

.row-3 input {
  @include myProperties;
  color: red;
}

Выход:

.hero-text-box a {
  color: #fff;
  font-size: 1.6rem;
  text-decoration: none;
}

.row-3 input {
  color: #fff;
  font-size: 1.6rem;
  text-decoration: none;
  color: red;
}

Answer 3

Используя SASS, вы можете использовать @extend .hero-text-box a