J'ai une classe SASS / CSS avec une ampersand, ceci est utilisé conjointement avec Vuejs. Ce que je me demandais, c'est que l'attribut CSS attribué sur l'ampersand fonctionne, mais l'élément racine lui-même n'est pas détecté par le navigateur.
<input name="city" class="curved-input__lg" type="text" placeholder="Palau Ujong, Singapore"/>
3 Réponses :
Ceci est dû au fait que vous devez déclarer la classe INPUT INTROND . Donc, votre attribut de classe ressemblera à Si vous écrivez votre CSS en entier, vous obtiendrez quelque chose comme ceci: dans cet esprit, vous verrez que vous devez ajouter le Classe class = "Intrée incurvée incurvée-entrée-INPUT__LG" . entrée courbe aussi.
Oui, exactement cela fonctionne comme celui-là lorsque je l'ai défini comme Intrée courbe courbe-INPUT__LG Mais y a-t-il un moyen de réviser ceci que je vais simplement définir ma classe comme incurvé-INPUT__LG ou Curved-INPUT__SM Mais il héritera de la classe incurvé classe?
Vous pouvez en ajouter le rayon frontalier, la hauteur et la marge au __ lg et __ sm classes. Mais alors vous allez dépasser l'utilisation de BEM comme vous faites ici. Donc, je vous recommande d'utiliser Entrée courbe courbe-INPUT__LG comme attribut de classe
Vous pouvez utiliser @extend code> pour éviter d'ajouter des classes supplémentaires à votre balisage ou (certains) code en double, si c'est votre objectif. .curved-input,
.curved-input__sm,
.curved-input__lg {
border-radius: 5px;
height: 50px;
margin-right: 1rem;
}
.curved-input__lg {
width: 300px;
}
.curved-input__sm {
width: 150px;
}
Eh bien, si vous voulez l'écrire comme ça, essayez de changer la première ligne à:
Eh bien, vous pouvez diviser les classes en
Entrée courbe ,__ lg comme deux classes différentes