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 'dark أو التشبع ، فيجب أن يعمل ذلك بالفعل ، وفقًا لمستندات Sass . إذا كنت ترغب في استخدام فلتر CSS المشبع ، فأنت على المسار الصحيح الذي يعتمد عليه من وظيفة greyscale() . هناك مرشح CSS 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.

شكرا @ تاملين! لقد كنت أستخدم Scout.app ، والذي يبدو أنه لا يزال على إصدار قديم من Sass ، لذا فإن الحل البديل هو حل سريع وبسيط يعمل بالفعل.

مرشحات function ($ filter، $ value) {
return # {$ filter} # {"(" + $ value + ")"}
}

البادئات $:
"-webkit-"،
"-moz-" ،
"-الآنسة-"،
"-o-"،
لا شيء؛

بادئة mixin (الخاصية $ ، القيمة $) {
بادئة each $
# {$ prefix} # {$ property}: $ value؛
}
}

restlessdesign مرحبًا فات وقتًا طويلاً ولكن ، لقد واجهت هذه المشكلة للتو وكان الحل البديل الخاص بي هو اقتباس وظيفة التصفية ثم استخدام unquote () عليها.

لذلك كتبت:
* { filter: unquote("filter-function(values)") }

ويعمل الإخراج.