sass en css: cible de la classe parent de l'enfant
J'utilise sass et a trouvé le problème. Ceci est un exemple de ce que je suis en train de faire:
.message-error {
background-color: red;
p& {
background-color: yellow
}
}
Devrait css:
.message-error {
background-color: red;
}
p.message-error {
background-color: yellow ;
}
L'idée: tous les éléments avec .message d'erreur s'affichera en rouge, sauf si elle est p.message d'erreur. Ce n'est pas la situation réelle de la vie, juste pour montrer un exemple.
SASS n'est pas en mesure de compiler, j'ai même essayé de concaténation de chaîne. Est-il un plugin qui permettra de faire exactement la même chose?
NOTE:
Je sais que je peux mettre un autre css définition comme
p.message-error{....}
sous, mais je tiens à éviter et à utiliser un seul endroit pour tous .message d'erreur définitions.
Grâce.
- Comme vous l'avez dit: ce n'est pas une situation de vie réelle. Si vous êtes à l'aide de CSS ou Sass, c'est mieux de faire ce que vous savez faire. Il n'y a pas de raison de faire ce qu'on vous propose. Dans l'affirmative, veuillez préciser.
- Il n'échappe pas à de véritables trop de vie: ce que je voulais, c'est avoir une présentation différente si le message d'erreur est soit <p> ou <ul>. Exemple: pour <p> élément, la boîte aurait un peu de fond-url de l'image à gauche (vérifier la Constellation du modèle d'administrateur). Mais si c'est <ul>, pas de sprites.
- Ne sais pas à propos de sass. Mais en normal CSS si tu veux "tous les éléments avec .message d'erreur s'affichera en rouge s'attendre si elle est p.message d'erreur" à partir de laquelle je suppose que le p.message d'erreur n'a pas besoin d'être de couleur jaune pour l'autre, que nous pourrions utiliser la négation pseudo-sélecteur de classe ".message d'erreur:not(p.message d'erreur)" - Pas sûr à ce sujet.
- Avez-vous une solution pour cela ?
Vous devez vous connecter pour publier un commentaire.
Comme Sass 3.4, c'est maintenant pris en charge. La syntaxe ressemble à ceci:
Note le
@at-root
directive et l'interpolation de la syntaxe de l'esperluette. Le défaut d'inclure la@at-root
directive entraînera un sélecteur comme.message-error p.message-error
plutôt quep.message-error
.Natalie Weizenbaum (le lead designer et développeur de Sass) dit qu'il ne sera jamais pris en charge:
Source: #282 – Élément.parent sélecteur
À ma connaissance, il n'existe aucune solution de contournement possible.
La meilleure chose à faire serait sans doute cela (en supposant que vous avez un peu plus dans votre .message d'erreur classe que juste la couleur d'arrière-plan.
Cette approche n'offre pas que près de regroupement, mais vous pouvez simplement les garder à proximité les uns des autres.
.message-error, p.message-error, ... { ... }
. Un ou deux sont bien, l'utiliser à bon escient.Je pense que si vous voulez les garder regroupés par parent sélecteur, vous pouvez avoir besoin d'ajouter un parent commun:
Bien sûr,
body
pourrait être remplacé par un autre parent commun, tels que#Content
ou d'une autrediv
qui contiendra tous les messages d'erreur.Mise à JOUR (une Autre Idée)
Si vous tirer parti de @pour et listes ensuite, il semble que cela devrait fonctionner (ce que je ne sais pas pour sûr, c'est si la liste permettra à la
.
(période).Devrait compiler quelque chose comme:
@Zeljko Il n'est pas possible de faire ce que vous voulez via le SASS.
Voir Nex3 commentaire: https://github.com/nex3/sass/issues/286#issuecomment-7496412
La clé est l'espace avant le " &":
au lieu de:
p .message-error
, je pense que l'OP est à la recherche d'p.message-error
(pas d'espace); tandis que votre suggestion fonctionne, je ne pense pas que c'est une solution dans ce cas particulier.J'ai eu le même problème j'ai donc fait un mixin pour que.
Pour le faire fonctionner, vous aurez besoin d'un chaîne de remplacement de la fonction ainsi (de Hugo Giraudel):
Comment cela fonctionne:
SCSS
Sortie
J'ai couru dans ce avant et. Bootstrap 3 poignées de ce à l'aide d'un parent sélecteur de hack. J'ai modifié légèrement pour mes propres fins...
wheresrhys utilise une approche similaire ci-dessus, mais avec quelques sass erreurs. Le code ci-dessus vous permet de le gérer comme un bloc et le réduire dans votre éditeur. L'imbrication de la variable rend également le local de sorte que vous pouvez réutiliser de classe $pour tous les cas où vous avez besoin d'appliquer ce hack. Voir ci-dessous pour un exemple de travail...
http://sassmeister.com/gist/318dce458a9eb3991b13
J'ai fait un mixin qui permet de résoudre ce problème.
Github: https://github.com/imkremen/sass-parent-append
Exemple: https://codepen.io/imkremen/pen/RMVBvq
D'utilisation (scss):
Résultat (css):
Cette triche peut travailler
Vous pouvez même être en mesure d'utiliser
$&
que votre nom de variable mais je ne suis pas sûr à 100% qu'il ne va pas faire une erreur.Et SASS a intégré la portée, ce qui supprime avoir à vous soucier de la valeur de
$and
fuite pour le reste de votre feuille de style.message-error p.message-error {...}
alors qu'avec l'origine de la tentative d'usage par Zeljko de la société mère sélecteur de&
, si elle avait travaillé comme il le voulait, il ne serait pas de nid, et de produire desp.message-error {...}
. Je ne sais pas ce à coup sûr, comme je ne suis pas un SASS expert, mais à partir de la lecture de la documentation, il semble que j'ai bien compris ce que la sortie serait pour votre solution.Dans la Version Actuelle: Sélective Steve (3.4.14) c'est maintenant possible, juste besoin de mettre à jour un peu votre code:
cela ne fonctionne que si vous êtes d'un niveau imbriqués, par exemple, il ne fonctionne pas si vous avez quelque chose comme ceci: