6
votes

Existe-t-il un moyen d'affecter la même valeur à 2 propriétés CSS à la fois?

Utilisation de CSS, moins ou Sass Pouvez-vous affecter la même valeur à 2 propriétés CSS à la fois?

Tout comme:

.c1, c2 {idableValue}

mais plutôt comme ceci: xxx


2 commentaires

Eh bien, vous pouvez attribuer Samevalue à une variable et utiliser cette variable pour vos deux propriétés - mais je ne pense pas que cela puisse être fait comme vous l'avez écrit.


Moins: @ c1: rouge @ c2: @ c1 , identique en sass: $ C1: rouge $ C2: $ C1 . Dans Stylus, vous pouvez obtenir la valeur d'une autre propriété: stylus-lang.com/docs /variables.html#Property-lookup . Dans CSS, vous avez CurrentColor et des propriétés personnalisées pour obtenir quelque chose de similaire


5 Réponses :


0
votes

Je ne pense pas que vous puissiez dans la manière dont vous avez décrit, vous auriez besoin d'utiliser une variable. Cependant, vous pouvez obtenir quelque chose de similaire avec des propriétés qui partagent la même espace de noms.

.funky {
  font: {
   family: fantasy;
   size: 30em;
   weight: bold;
  }
}


0 commentaires

7
votes

Vous ne pouvez pas faire cela avec CSS.

Le moyen le plus simple de le faire est d'utiliser une variable. Voici comment vous feriez cela en moins p> xxx pré>

et la même chose dans SASS P>

@props: background-color, color;
@val: red;
@val2: green;
.properties {...}
.demo {
  border-color: @val2;
  .properties(@props, @val)
}
.demo2 {
  .properties(@props, @val2)
}


1 commentaires

Modifier: sur la deuxième pensée, je préfère ... @ i: 1) Quand (@i <= longueur (@properties)) {@property: extraire (@properties, @i); ...



3
votes

Si votre navigateur prend en charge Propriétés personnalisées (AKA CSS variables) Vous pouvez définir une propriété personnalisée pour la réutilisation:

.foo {
  $example: red;
  background-color: $example;
  color: $example;
}


0 commentaires

0
votes

in Stylus est possible de faire la recherche propriété em>, ce qui vous permet de Utilisez les propriétés de l'ancêtre parent actuellement ou la plus proche et utilisez-la pour les calculs.

Pour votre cas spécifique, vous pouvez écrire: P>

.demo {
  color: red;
  background-color: red;
}


2 commentaires

"Mais actuellement, il n'est pas prévu de le développer" - en fait Il est mis en œuvre plus il y a un an. Il n'est tout simplement pas assez de ressources humaines pour polir bientôt toutes les nouvelles fonctionnalités de la libération v3.


Ops Désolé, je ne le savais pas. J'espère que la nouvelle version V3 arriverait à court de temps



0
votes

avec stylet Vous pouvez faire de cette façon en utilisant itération et Interpollation :

.modal
  position : absolute
  for bord in top bottom left right
    {bord}: 1em
  for larg in  width min-width height min-height
    {larg}: auto
  for maxl in  max-width max-height
    {maxl}: none


0 commentaires