Saya membuat palet warna dan saya telah melihat banyak cara online menggunakan sass yang saya gunakan dalam proyek, namun saya mengambil input pengguna (kode hex) dan ingin mencetaknya dengan varian persentase yang berbeda - untuk tunjukkan kepada pengguna versi #ff0000 yang lebih terang/gelap misalnya.

Apakah ini mungkin? Saya telah melihat hal-hal seperti:

$color: #3cb878;
$light: lighten($color,15%);
$dark: darken($color,15%);

Dan idealnya saya ingin "$color" menjadi input pengguna dan kemudian saya dapat mencetak beberapa varian persentase.

Terima kasih!

2
mark-cas 16 November 2017, 18:38
2
Browser tidak pernah melihat kode SASS, jadi javascript tidak mungkin bekerja dengannya. Anda dapat menggunakan jacascript untuk bekerja dengan CSS yang dikompilasi - ada contohnya di sini: jsfiddle.net/6ge3t3Lc
 – 
Simon Brahan
16 November 2017, 18:47

3 jawaban

Ya kamu bisa!

Ada kompiler SASS yang ditulis dalam JavaScript yang dapat Anda jalankan di dalam browser.

https://github.com/medialize/sass.js/

Anda harus melakukan pencarian dan mengganti kode sumber SASS melalui JavaScript, lalu mengompilasinya. Anda kemudian dapat menunjukkan ini kepada pengguna dengan memasukkannya ke dalam DOM.

Untuk menjalankan perpustakaan sangat sederhana:

<script src="dist/sass.js"></script>
<script>
  var scss = '$someVar: 123px; .some-selector { width: $someVar; }';
  sass.compile(scss, function(result) {
    console.log(result);
  });
</script>
1
Reactgular 16 November 2017, 19:53
Terima kasih atas komentarnya, saya cukup baru dalam hal-hal seperti ini, jadi bisakah Anda membantu saya? Varian persentase yang dimasukkan adalah 5% ,10% misalnya yang akan membuat warna hex 5% atau 10% lebih terang/gelap, apakah mungkin melakukannya melalui ini? Terima kasih lagi!
 – 
mark-cas
17 November 2017, 13:47
 – 
Reactgular
17 November 2017, 19:31

Karena SASS harus dikompilasi ke CSS untuk browser, Anda dapat menggunakan fungsi Javascript untuk mencerahkan atau menggelapkan warna yang dimasukkan pengguna Anda menggunakan tautan dari Trik CSS.

0
dom_ahdigital 16 November 2017, 18:49

Tidak benar-benar berkinerja dan rumit dan karenanya tidak disarankan - tetapi apa yang akan berhasil jika Anda dapat membuat skrip server: posting input pengguna ke server, tulis ke file sass dan kompilasi ulang css.

Mungkin satu set warna yang telah ditentukan yang dapat dipilih pengguna sudah cukup di sini?

0
Joschi 16 November 2017, 19:21