0
votes

CSS qui se substitue

Est-il possible de créer un style qui se substitue lui-même s'il y a une autre valeur pour lui sans utiliser! important? Je ne peux pas utiliser! Important car cela cassera les animations.

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

.p-20{
  padding: 20px;
}

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

css sass

6 commentaires

Ici, le poids de la classe compte, pour que votre p-20 fonctionne, ajoutez-le sous l'en-tête à l'intérieur du panel et cela fonctionnera, ou inversement, prenez en-tête hors du panneau et placez-le au-dessus de p-20

@JoykalInfotech Je sais que cela fonctionnerait mais c'est un projet avec des milliers de lignes de scss Je ne peux pas le laisser rester dans le désordre ... le but de la question est de savoir s'il est possible d'avoir quelque chose comme "declare ce style par défaut ". S'il n'y en a pas, je peux toujours faire CSS .heading {padding: 10px; & -large {padding: 20px;}}

Il y a fondamentalement 2 façons, spécificité et ! Important , et si elles sont égales, la dernière règle du CSS s'appliquera.

@LGSon D'accord, c'est la réponse que je cherchais: P je pensais qu'il pourrait y avoir un "opposé" à! Important. Merci pour l'aide! :RÉ

Vous voudrez peut-être expliquer ce que vous voulez dire avec "Je ne peux pas utiliser ! Important car cela cassera les animations." Cette partie pourrait être facile à résoudre, et si, vous pouvez utiliser ! important pour le reste. Néanmoins, ! Important ne doit être utilisé qu'en dernier recours.

@LGSon Je sais que ! Important est toujours ma dernière ressource, je l'ai écrit dans la description du problème sinon tout le monde commenterait "il suffit d'utiliser ! Important " car c'est la réponse de tout le monde dans toutes les questions connexes, c'est pourquoi j'ai créé ma propre question à cet effet. Cependant, j'aimerais qu'il y ait un ! Default pour le style comme il y en a pour les variables scss.

3 Réponses :

1
votes

Vous pouvez créer un nouveau style et donner à votre style la même spécificité et l'appliquer après celui que vous souhaitez remplacer.

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

css

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

3 commentaires

Je sais que cela fonctionnerait mais c'est un projet avec des milliers de lignes de scss Je ne peux pas le laisser dans le désordre ... le but de la question est de savoir s'il est possible d'avoir quelque chose comme "déclarer ce style par défaut". S'il n'y en a pas, je peux toujours le faire. Merci quand même :) CSS .heading {padding: 10px; & -large {padding: 20px;}}

Le seul moyen que je connaisse, c'est par la spécificité. Je ne comprends peut-être pas votre situation exacte mais j'ai déjà été à votre place :) donc si j'étais vous, je créerais 2 classes comme head-default et head et utilisez la commande spécificité + pour remplacer le style des éléments qui ont besoin d'un style différent.

Je vais créer une rubrique petite, moyenne et grande pour mon problème. Je dirais donc que vos questions sont exactes, je vais les marquer comme réponse. Désolé si je n'étais pas assez clair. ci-dessous est le genre de réponse que je recherche, jetez un coup d'œil, merci beaucoup pour l'aide :)

0
votes

Dans les commentaires, @LGSon a répondu à ma question avec: "Il y a fondamentalement 2 manières, spécificité et ! Important , et si elles sont égales, la dernière règle en CSS s'appliquera". Ce qui signifie qu'il y a de toute façon à déclarer un style par défaut. Comme il l'a dit, cela doit être fait avec spécificité ou ! Important , cependant ! Important doit toujours être une dernière ressource.

0 commentaires

0
votes

Cela semble un travail pour les variables CSS où vous n'avez pas à vous soucier de la spécificité:

<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>

.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;
}

0 commentaires