Libsass: Novas funções de filtro CSS entram em conflito com funções integradas do Sass

Sim, acabei de bater nisso também.

Atingindo isso também.

: +1:

Algumas notícias sobre este?

Atualmente estou trabalhando em @extend , mas tentarei chegar a este antes do feriado!

Tendo esse problema também.

: +1:

Confirmando que darken() e saturate() também são afetados. Existe uma solução alternativa?

Encontrada uma solução alternativa, você pode usar esta função entretanto. Deve ser uma solução drop-in:

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

Você também pode adicionar um prefixo de fornecedor, se desejar:

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

Então, você pode apenas escrever:

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

Basta colocar isso aqui para referência:
https://developer.mozilla.org/en-US/docs/Web/CSS/filter

@kennethormandy Você encontrou uma

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

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

Saídas:

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

… Mas na verdade nem deveria estar gerando darken - deveria ser um valor de cor inteiramente novo.

Uau, não fazia ideia que darken() não funcionava. @restlessdesign , se você se livrar de sua função personalizada, darken() já funciona. Então apenas escreva:

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

e você vai conseguir

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

Eu acho que você pode (compreensivelmente) estar misturando as funções do Sass com filtros CSS. O exemplo que dei só funcionará porque é um filtro CSS . Se você deseja usar o escurecimento ou saturação do Sass, isso já deve funcionar, de acordo com os documentos do Sass . Se você quiser usar o filtro CSS saturado, está no caminho certo baseando-o na minha função greyscale() . Existe o filtro CSS darken() , então você está sobrescrevendo a função escurecer embutida do libsass agora.

Meu erro. Eu estava usando métodos de aninhamento e chamei adjust_hue vez de adjust-hue , que entrou em cascata em darken() . Brutal, mas adoro o fato de o LibSass reportar erros ou fornecer uma saída inválida em vez de ignorar as chamadas silenciosamente! Desculpe pelo alarme falso.

+1
Embora a solução alternativa funcione bem (obrigado @kennethormandy), seria bom se ela fosse corrigida.

Há alguma notícia sobre este? Seria muito bom não ofuscar o código com a solução alternativa fornecida acima, embora funcione.

Procurando uma solução também =)

+1

+1

+1

Obrigado @kennethormandy pela solução alternativa

+1. A propósito: Obrigado @kennethormandy pela solução.

Acabei de abrir (e fechar) um problema sobre isso também. Seria bom limpar isso, pois há uma mudança fundamental no CSS para começar a usar mais e mais funções como sintaxe com sobreposição.

Sim @kennethormandy , obrigado pela ideia alternativa, mas quando você faz isso, você mata a função grayscale() real e isso é uma merda! Espero que uma solução real para isso chegue logo.

Outra solução alternativa: em vez de filter: invert() use filter: #{"invert()"} . Você pode colocar o que quiser entre as aspas e a saída será feita literalmente.

Tudo bem, deixe-me ver se podemos fazer isso no 3.0.

Obrigado @tamlyn! Tenho usado o Scout.app, que aparentemente ainda está em uma versão antiga do Sass, então sua solução alternativa é uma solução rápida e simples que realmente funciona.

filtros de função @ ($ filter, $ value) {
@return # {$ filter} # {"(" + $ value + ")"}
}

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

@mixin prefixer ($ property, $ value) {
@each $ prefixo em $ prefixos {
# {$ prefix} # {$ property}: $ value;
}
}

@restlessdesign Olá pessoal, sei disso muito tarde, mas acabei de ter esse problema e minha solução alternativa foi citar a função de filtro e usar unquote () nela.

Então eu escrevi:
* { filter: unquote("filter-function(values)") }

E a saída funciona.