Milligram: Ubah warna sorotan dengan mudah (#9b4dca)

Dibuat pada 22 Feb 2018 · 6Komentar · Sumber: milligram/milligram

Menggunakan variabel CSS3 (properti khusus) dimungkinkan untuk mengganti warna sorotan dalam 1 baris CSS.

Di milligram.css memiliki sesuatu di sepanjang baris:

:root {
  --highlight-color: #9b4dca;
}

dan kemudian ganti setiap #9b4dca dengan var(--highlight-color) .

Setelah ini selesai, mengganti warna sorotan semudah memasukkan file custom.css dengan

:root {
  --highlight-color: #abcabc;
}

Hacktoberfest new feature

Sumber

mterron

👍10 ❤3

Komentar yang paling membantu

Saya datang ke sini untuk hal yang sama ^^ tetapi karena ditulis dalam SASS dan Anda mungkin ingin mendukung browser lama, saya akan merekomendasikan melakukan contoh yang terbukti mundur seperti ini:

button {
  background-color: $color-primary;
  background-color: var(--color-primary, $color-primary);
}

Dengan cara ini browser yang tidak mendukung properti kustom CSS akan tetap mundur ke versi yang berfungsi. Juga dengan cara ini :root {} dalam stylesheet aktual tidak diperlukan karena var() sudah menyediakan opsi mundur.

Bersulang,
Dominik

dkundel pada 23 Mar 2018

👍6

Semua 6 komentar

button {
  background-color: $color-primary;
  background-color: var(--color-primary, $color-primary);
}

Bersulang,
Dominik

dkundel pada 23 Mar 2018

👍6

Apakah ada kemajuan atau sesuatu yang mereka lakukan sejauh ini? 😄.

timrossback pada 29 Jun 2019

Apakah ada kemajuan atau sesuatu yang mereka lakukan sejauh ini? 😄.

anda selalu dapat mengubah nilai warna dari src/_Color.sass dan kemudian mengkompilasi ulang lagi dengan sass --update . Anda juga dapat menambahkan file sass Anda sendiri.

dntzbgh pada 29 Jun 2019

Apakah ada kemajuan atau sesuatu yang mereka lakukan sejauh ini? 😄.
anda selalu dapat mengubah nilai warna dari src/_Color.sass dan kemudian mengkompilasi ulang lagi dengan sass --update . Anda juga dapat menambahkan file sass Anda sendiri.

Poin bagus! Saya kira saya sedang mencari solusi yang lebih out-of-the-box karena saya tidak menggunakan Sass, tetapi saya tidak benar-benar tahu bagaimana itu dapat dengan mudah dilakukan selain mengubah nilainya sendiri di /dist/milligram.min.css yang akan bermasalah.

timrossback pada 30 Jun 2019

👍1

Sukai kerangka kerja ini! Gak sabar nunggu fitur ini rilis