Libsass: Les nouvelles fonctions de filtre CSS sont en conflit avec les fonctions Sass intégrées

Oui, je viens de frapper ça aussi.

Frapper cela aussi.

: +1:

Des nouvelles sur celui-ci?

Je travaille actuellement sur @extend , mais je vais essayer d'arriver à celui-ci avant les vacances!

Avoir ce problème aussi.

: +1:

Confirmer que darken() et saturate() sont également affectés. Y at-il un travail autour?

Trouvé une solution de contournement, vous pouvez utiliser cette fonction en attendant. Ce devrait être une solution instantanée:

<strong i="6">@function</strong> grayscale($value) {
  <strong i="7">@return</strong> #{ "grayscale(" + $value + ")" };
}

Vous pouvez également le préfixer par le fournisseur si vous le souhaitez:

<strong i="11">@mixin</strong> filter($properties) {
  // Your vendor prefixing stuff here, I am using Bourbon:
  <strong i="12">@include</strong> prefixer(filter, $properties, webkit moz spec);
}

Ensuite, vous pouvez simplement écrire:

<strong i="16">@include</strong> filter(grayscale(100%));

Juste en mettant ceci ici pour référence:
https://developer.mozilla.org/en-US/docs/Web/CSS/filter

@kennethormandy Avez-vous trouvé une

<strong i="7">@function</strong> darken($color, $amount) {
  <strong i="8">@return</strong> #{ "darken(" + $color + "," + $amount ")" };
}

.selector {
    border: 1px solid darken(#f0f1f4, 3);
}

Les sorties:

border: 1px solid darken(#f0f1f4,3"");

… Mais en réalité, il ne devrait même pas afficher darken - cela devrait être une nouvelle valeur de couleur entièrement.

Wow, je n'avais aucune idée que darken() ne fonctionnait pas. @restlessdesign , si vous vous débarrassez de votre fonction personnalisée, darken() fonctionne déjà. Alors écrivez simplement:

.selector {
    border: 1px solid darken(#f0f1f4, 3);
}

et vous aurez

.selector {
  border:1px solid #e7e9ee;
}

Je pense que vous pourriez (naturellement) mélanger les fonctions de Sass avec des filtres CSS. L'exemple que j'ai donné ne fonctionnera que parce qu'il s'agit d'un filtre CSS . Si vous cherchez à utiliser l'obscurité ou la saturation de Sass, cela devrait déjà fonctionner, selon la documentation Sass . Si vous souhaitez utiliser le filtre CSS saturé, vous êtes sur la bonne voie en le basant sur ma fonction greyscale() . Il existe darken() filtre CSS

Mon erreur. J'étais en train d'imbriquer des méthodes, et j'ai appelé adjust_hue au lieu de adjust-hue , qui s'est cascade dans darken() . Brutal, mais j'adore le fait que LibSass signale des erreurs ou donne une sortie invalide au lieu d'ignorer silencieusement les appels! Désolé pour la fausse alarme.

+1
Bien que la solution de contournement fonctionne correctement (merci @kennethormandy), ce serait bien si elle était corrigée.

Y a-t-il des nouvelles sur celui-ci? Ce serait vraiment bien de ne pas obscurcir le code avec la solution de contournement fournie ci-dessus, bien que cela fonctionne.

Vous cherchez également une solution =)

+1

+1

+1

Merci @kennethormandy pour la solution de contournement

+1. Au fait: merci @kennethormandy pour la solution.

Je viens d'ouvrir (et de fermer) un problème à ce sujet également. Ce serait bien de le nettoyer car il y a un changement fondamental de CSS pour commencer à utiliser de plus en plus de fonctions comme la syntaxe avec chevauchement.

Ouais @kennethormandy , merci pour l'idée de contournement, mais quand vous faites cela, vous tuez la fonction grayscale() et c'est nul! J'espère qu'une vraie solution à ce problème viendra bientôt.

Une autre solution de contournement: au lieu de filter: invert() utilisez filter: #{"invert()"} . Vous pouvez mettre ce que vous voulez entre les guillemets et il sera affiché textuellement.

Très bien, laissez-moi voir si nous pouvons obtenir cela en 3.0.

Merci @tamlyn! J'ai utilisé Scout.app, qui est apparemment toujours sur une ancienne version de Sass, donc votre solution de contournement est une solution rapide et simple qui fonctionne réellement.

@function filters ($ filter, $ value) {
@return # {$ filter} # {"(" + $ value + ")"}
}

préfixes $:
"-webkit-",
"-moz-",
"-SP-",
"-o-",
nul;

@mixin prefixer ($ property, $ value) {
@chaque préfixe $ dans les préfixes $ {
# {$ prefix} # {$ property}: $ value;
}
}

@restlessdesign Salut les gens, je le sais très tard, mais je viens d'avoir ce problème et ma solution de contournement a été de citer la fonction de filtrage, puis d'utiliser unquote () dessus.

Alors j'ai écrit:
* { filter: unquote("filter-function(values)") }

Et la sortie fonctionne.