Libsass: Новые функции фильтра CSS конфликтуют со встроенными функциями Sass

Да, я тоже в это попал.

И это тоже.

: +1:

Есть новости по этому поводу?

Сейчас я работаю над @extend , но я постараюсь добраться до этого до праздников!

Имея эту проблему тоже.

: +1:

Подтверждение того, что darken() и saturate() также затронуты. Есть ли обходной путь?

Нашел обходной путь, пока можете использовать эту функцию. Это должно быть готовое решение:

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

Вы также можете использовать префикс поставщика, если хотите:

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

Затем вы можете просто написать:

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

Просто поместите это здесь для справки:
https://developer.mozilla.org/en-US/docs/Web/CSS/filter

@kennethormandy Вы нашли

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

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

Выходы:

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

… Но на самом деле он даже не должен выводить darken - это должно быть полностью новое значение цвета.

Вау, я понятия не имел, что darken() не работает. @restlessdesign , если вы избавитесь от своей пользовательской функции, darken() уже работает. Так что просто напишите:

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

и ты получишь

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

Я думаю, что вы можете (по понятным причинам) смешивать функции Sass с фильтрами CSS. Приведенный мной пример будет работать только потому, что это фильтр CSS . Если вы хотите использовать Sass Darken или Saturate, это уже должно работать, согласно документации Sass . Если вы хотите использовать насыщение CSS-фильтра, вы на правильном пути, основываясь на моей функции greyscale() . Существует фильтр CSS darken() , так что вы прямо сейчас просто переписываете встроенную функцию darken в libsass.

Моя ошибка. Я вложил методы и вызвал adjust_hue вместо adjust-hue , который каскадно переходил в darken() . Жестоко, но мне нравится, что LibSass фактически сообщает об ошибках или выдаёт неверный вывод вместо того, чтобы молча игнорировать вызовы! Извините за ложную тревогу.

+1
Хотя обходной путь работает нормально (спасибо @kennethormandy), было бы неплохо, если бы его исправили.

Есть какие-нибудь новости по этому поводу? Было бы очень хорошо не запутывать код с помощью описанного выше обходного пути, хотя он работает.

Ищем тоже решение =)

+1

+1

+1

Спасибо @kennethormandy за обходной путь

+1. Кстати: Спасибо @kennethormandy за решение.

Только что открыл (и закрыл) вопрос об этом. Было бы неплохо очистить это, поскольку в CSS происходит фундаментальный сдвиг, чтобы начать использовать все больше и больше функций, таких как синтаксис с перекрытием.

Да, @kennethormandy , спасибо за идею обходного пути, но когда вы это делаете, вы убиваете фактическую функцию grayscale() и это отстой! Я надеюсь, что в ближайшее время это будет исправлено.

Другой обходной путь: вместо filter: invert() используйте filter: #{"invert()"} . Вы можете заключить в кавычки все, что хотите, и это будет дословно выводиться.

Хорошо, позволь мне посмотреть, сможем ли мы получить это в версии 3.0.

Спасибо @tamlyn! Я использовал Scout.app, который, по-видимому, все еще находится в старой версии Sass, поэтому ваш обходной путь - быстрое и простое решение, которое действительно работает.

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

префиксы $:
"-webkit-",
"-moz-",
"-РС-",
"-o-",
ноль;

Префикс @mixin ($ свойство, $ значение) {
@each $ prefix в $
# {$ prefix} # {$ property}: $ value;
}
}

@restlessdesign Привет, ребята, я знаю это очень поздно, но у меня только что возникла эта проблема, и мой обходной путь заключался в том, чтобы процитировать функцию фильтра, а затем использовать для нее unquote ().

Я написал:
* { filter: unquote("filter-function(values)") }

И выход работает.