Libsass: Las nuevas funciones de filtro CSS entran en conflicto con las funciones integradas de Sass

Sí, acabo de golpear esto también.

Golpeando esto también.

: +1:

¿Alguna novedad sobre este?

Actualmente estoy trabajando en @extend , ¡pero intentaré llegar a este antes de las vacaciones!

Tener este problema también.

: +1:

Confirmando que darken() y saturate() también se ven afectados. ¿Existe alguna solución?

Encontró una solución, puede usar esta función mientras tanto. Debería ser una solución inmediata:

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

También puede prefijarlo el proveedor, si lo desea:

<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);
}

Entonces, puedes simplemente escribir:

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

Solo pongo esto aquí como referencia:
https://developer.mozilla.org/en-US/docs/Web/CSS/filter

@kennethormandy ¿Ha encontrado una

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

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

Salidas:

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

… Pero en realidad ni siquiera debería generar darken , debería ser un valor de color completamente nuevo.

Vaya, no tenía idea de que darken() no funcionaba. @restlessdesign , si se deshace de su función personalizada, darken() ya funciona. Así que solo escribe:

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

y obtendrás

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

Creo que (comprensiblemente) podría estar mezclando las funciones de Sass con los filtros CSS. El ejemplo que di solo funcionará porque es un filtro CSS . Si está buscando usar el oscurecer o saturar de Sass, eso ya debería funcionar, según los documentos de Sass . Si desea usar el filtro CSS saturado, está en el camino correcto basándolo en mi función greyscale() . Hay darken() filtro CSS

Mi error. Estaba anidando métodos y llamé adjust_hue lugar de adjust-hue , que se convirtió en cascada en darken() . Brutal, pero me encanta que LibSass en realidad informe errores o dé una salida no válida en lugar de ignorar las llamadas en silencio. Lo siento por la falsa alarma.

+1
Aunque la solución funciona bien (gracias @kennethormandy), sería bueno si se solucionara.

¿Hay alguna novedad sobre este? Sería realmente bueno no ofuscar el código con la solución proporcionada anteriormente, aunque funciona.

Buscando una solución también =)

+1

+1

+1

Gracias @kennethormandy por la solución

+1. Por cierto: Gracias @kennethormandy por la solución.

También abrí (y cerré) un problema sobre esto. Sería bueno aclarar esto, ya que hay un cambio fundamental de CSS para comenzar a usar más y más funciones como sintaxis con superposición.

Sí @kennethormandy , gracias por la idea de la solución alternativa, pero cuando haces eso, matas la función grayscale() real y eso apesta. Espero que pronto llegue una solución real para esto.

Otra solución alternativa: en lugar de filter: invert() use filter: #{"invert()"} . Puede poner lo que quiera entre las comillas y se emitirá literalmente.

Muy bien, déjame ver si podemos conseguir esto en 3.0.

¡Gracias @tamlyn! He estado usando Scout.app, que aparentemente todavía está en una versión anterior de Sass, por lo que su solución es una solución rápida y simple que realmente funciona.

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

$ prefijos:
"-webkit-",
"-moz-",
"-em-",
"-o-",
nulo;

@mixin prefixer ($ propiedad, $ valor) {
@each $ prefix in $ prefixes {
# {$ prefix} # {$ propiedad}: $ valor;
}
}

@restlessdesign Hola amigos, lo sé muy tarde, pero acabo de tener este problema y mi solución fue citar la función de filtro y luego usar unquote () en ella.

Entonces escribí:
* { filter: unquote("filter-function(values)") }

Y la salida funciona.