CSS, который давайте переопределим себя

Question

Можно ли создать стиль, который переопределит сам себя, если для него есть какое-то другое значение, без использования! Important? Я не могу использовать! Важно, потому что это сломает анимацию.

.p-20{
  padding: 20px;
}

.panel{
  .heading{
    //this would be the default value and would let himself be override
    padding: 10px;
  }
}

<div class="panel">
   <div class="heading p-20">
      My padding is 10px instead of 20px...
   </div>
</div>

css sass

0

Sofia Chaves 1 Май 2019 в 13:51

Answer 1

Вы можете создать новый стиль, придать вашему стилю ту же специфичность и применить его после того, который вы хотите переопределить.

<div class="panel">
   <div class="heading p-20 new-class">
      My padding is 10px instead of 20px...
   </div>
</div>

Css

.panel{
  .heading{
    padding: 10px;
  }
  .new-class{
    padding: 20px;
  }
}

1

Becky 1 Май 2019 в 11:10

Answer 2

В комментариях @LGSon ответил на мой вопрос: «Есть в основном 2 пути, specificity и !important, и если они равны, будет применяться последнее правило в CSS». Это означает, что в любом случае можно объявить стиль по умолчанию. Как он сказал, это должно быть сделано с specificity или !important, однако !important всегда должен быть последним ресурсом.

0

Sofia Chaves 1 Май 2019 в 11:28

Answer 3

Это звучит как работа с переменными CSS, где вам не нужно заботиться о специфичности:

.p-20 {
  --p: 20px;
  padding:20px; /*we keep this for the element without variable*/
}

.panel .heading {
  padding: var(--p, 10px); /* 10px will be the default value if --p is not set*/
  background:red;
}

<div class="panel">
  <div class="heading">
    My padding is 10px
  </div>
</div>
<div class="panel">
  <div class="heading p-20">
    My padding is 20px
  </div>
</div>

<div class="panel">
  <div class="p-20">
    My padding is 20px
  </div>
</div>

0

Temani Afif 1 Май 2019 в 13:41

CSS, который давайте переопределим себя

3 ответа

Похожие вопросы

Новые вопросы

css