Less.js: Sertakan fungsi invert to color

Dibuat pada 21 Jan 2012 · 6Komentar · Sumber: less/less.js

Saat ini saya menggunakan
color: hsl(hue(@black), saturation(@black), 100 - lightness(@black));
untuk membalikkan warna tapi
color: invert(@color)
akan menjadi sintaks yang jauh lebih baik untuk pekerjaan itu.

Kode untuk fungsi:

 membalikkan: fungsi (warna) {
 var rgb = [255 - warna.rgb[0],
 255 - warna.rgb[1],
 255 - color.rgb[2]]; 
 kembalikan baru(pohon.Warna)(rgb);
 },

Saya mengujinya dengan less.js 1.2.1 sehingga berhasil

feature request medium priority up-for-grabs

Sumber

Oskariok

👍3

Komentar yang paling membantu

+1 untuk ini:
Hanya untuk memperjelas, apakah maksud Anda Anda menggunakan

hsl(hue(@color), saturation(@color), 100 - lightness(@color));

ascottmccauley pada 16 Jun 2012

👍2

Semua 6 komentar

Posting asli yang diperbarui

Oskariok pada 2 Feb 2012

+1 untuk ini:
Hanya untuk memperjelas, apakah maksud Anda Anda menggunakan

hsl(hue(@color), saturation(@color), 100 - lightness(@color));

ascottmccauley pada 16 Jun 2012

👍2

+1 juga.

srsgores pada 2 Mei 2013

ini sekarang dapat dicapai dengan negasi

http://lesscss.org/functions/#color -blending-negation

lukeapage pada 20 Feb 2014

Tidak benar-benar negation . Kode javascript yang diposting oleh @Oskariok sederhana. Kurang (#fff - @color) atau sama dengan difference(#fff, @color) . Namun kode Less yang disarankan oleh @ascottmccauley nanti tidak sama, hanya membalikkan kecerahan warna (jadi Less dan potongan javascript dari posting pertama tidak cocok satu sama lain). "Invert lightness" juga dapat dicapai dengan lebih sedikit verbose: spin((#fff - @color), 180);