web-dev-qa-db-fra.com

Ajout! Important à l'aide d'un Compass Mixin

Si j'utilise une boussole pour CSS et que j'utilise une fonction ou un mixage comme:

   @include background-image(linear-gradient(#a3cce0, #fff));

existe-t-il un moyen facile d'ajouter la boussole! importante à chaque ligne qu'elle génère?

compass-sass
45
David

UPDATE : les nouvelles versions de sass prennent désormais en charge cette syntaxe:

@include border-radius(5px !important);

Faites simplement cela (comme indiqué dans la réponse @naoufal).

--- ancienne réponse ---

Vous ne pouvez pas utiliser! Important avec les mélanges de boussoles, mais le coupable n'est pas la boussole, vous devriez en blâmer sass pour cela.

@include border-radius(5px) !important; #=> SASS Syntax Error
28
tothemario

Vous pouvez l'inclure dans le mixin comme ceci:

@include border-radius(5px !important);

Le compas produira les informations suivantes:

-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
-ms-border-radius: 5px !important;
-o-border-radius: 5px !important;
border-radius: 5px !important;
85
naoufal

J'ai eu ce problème la dernière fois et j'ai remplacé le style de la boussole avec un sélecteur plus puissant. Je viens d'ajouter un identifiant sur mon élément html

span { @include border-radius(5px);}

span#no-radius { @include border-radius(0px); } // override
4
Thomas delissen

Je viens de passer des heures à comprendre cela, mais il y a une astuce rapide que vous pouvez faire. En haut de votre fichier SASS, ajoutez ce qui suit:

$i: unquote("!important");

dans votre style, procédez comme suit:

color: #CCCCCC $i;

la sortie est:

color: #CCCCCC !important;

échantillon complet:

$i: unquote("!important");

.some-style {
    color: white $i;
}

production:

.some-style {
    color: white !important;
}
3
John Angelini

Cette question est apparue dans ma recherche d'un problème similaire, elle est juste, mais je voulais juste ajouter que Faire un mixin Sass avec des arguments optionnels était une autre approche possible que j'ai trouvée utile.

Remplacez inset par important et passez !important quand vous en avez besoin.

3
Shane Maiolo