Libsass: Fungsi filter CSS baru bertentangan dengan fungsi Sass bawaan

Ya, saya baru saja memukul ini juga.

Memukul ini juga.

: +1:

Ada berita yang satu ini?

Saat ini saya sedang mengerjakan @extend , tapi saya akan mencoba mendapatkan yang ini sebelum liburan!

Mengalami masalah ini juga.

: +1:

Mengkonfirmasi bahwa darken() dan saturate() juga terpengaruh. Apakah ada solusinya?

Menemukan solusi, Anda dapat menggunakan fungsi ini untuk sementara. Ini harus menjadi solusi drop-in:

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

Anda juga dapat membuat awalan vendor, jika Anda ingin:

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

Kemudian, Anda tinggal menulis:

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

Letakkan ini di sini untuk referensi:
https://developer.mozilla.org/en-US/docs/Web/CSS/filter

@kennethormandy Pernahkah Anda menemukan solusi untuk fungsi SASS yang menggunakan dua parameter?

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

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

Keluaran:

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

… Tapi sebenarnya seharusnya tidak menghasilkan darken —itu harus menjadi nilai warna yang sepenuhnya baru.

Wow, saya tidak tahu darken() tidak berfungsi. @restlessdesign , jika Anda menyingkirkan fungsi kustom Anda, darken() sudah berfungsi. Jadi tulis saja:

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

dan Anda akan mendapatkan

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

Saya pikir Anda mungkin (dapat dimengerti) mencampur fungsi Sass dengan Filter CSS. Contoh yang saya berikan hanya akan berfungsi karena ini adalah Filter CSS . Jika Anda ingin menggunakan Sass 'darken atau saturate, itu seharusnya sudah berfungsi, sesuai dokumen Sass . Jika Anda ingin menggunakan filter CSS saturate, Anda berada di jalur yang benar mendasarkannya dari fungsi greyscale() . Ada CSS darken() filter, jadi Anda sebenarnya baru saja menulis fungsi penggelap bawaan libsass sekarang.

Kesalahanku. Saya menggunakan metode bersarang, dan memanggil adjust_hue alih-alih adjust-hue , yang mengalir ke darken() . Brutal, tetapi saya suka LibSass benar-benar akan melaporkan kesalahan atau memberikan output yang tidak valid alih-alih mengabaikan panggilan secara diam-diam! Maaf atas alarm palsu.

+1
Meskipun penyelesaiannya berfungsi dengan baik (terima kasih @kennethormandy), alangkah baiknya jika diperbaiki.

Apa ada kabar yang satu ini? Akan sangat menyenangkan untuk tidak mengaburkan kode dengan solusi yang disediakan di atas, meskipun berhasil.

Mencari solusi juga =)

+1

+1

+1

Terima kasih @kennethormandy untuk solusinya

+1. By the way: Terima kasih @kennethormandy untuk solusinya.

Baru saja membuka (dan menutup) masalah tentang ini juga. Alangkah baiknya untuk membersihkan ini karena ada perubahan mendasar dari CSS untuk mulai menggunakan lebih banyak fungsi seperti sintaks dengan tumpang tindih.

Ya @kennethormandy , terima kasih atas ide solusinya, tetapi ketika Anda melakukannya, maka Anda mematikan fungsi grayscale() dan itu menyebalkan! Saya berharap perbaikan nyata untuk ini segera datang.

Solusi lain: alih-alih filter: invert() gunakan filter: #{"invert()"} . Anda dapat meletakkan apapun yang Anda inginkan di dalam tanda kutip dan itu akan menjadi output kata demi kata.

Baiklah, biarkan saya melihat apakah kita bisa mendapatkan ini di 3.0.

Terima kasih @tamlyn! Saya telah menggunakan Scout.app, yang tampaknya masih menggunakan versi lama Sass, jadi solusi Anda adalah solusi cepat dan sederhana yang benar-benar berfungsi.

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

$ prefiks:
"-webkit-",
"-moz-",
"-MS-",
"-Hai-",
batal;

Awalan @mixin ($ property, $ value) {
@each $ prefix di $ prefixes {
# {$ prefix} # {$ property}: $ value;
}
}

@restlessdesign Hai teman-teman, saya tahu ini sangat terlambat tetapi, saya baru saja mengalami masalah ini dan solusi saya adalah mengutip fungsi filter dan kemudian menggunakan unquote () di atasnya.

Jadi saya menulis:
* { filter: unquote("filter-function(values)") }

Dan hasilnya berhasil.