Bootstrap cepat dan kotor menimpa semasa runtime

Bootstrap 5.2 dan ke atas telah menyediakan penyelesaian kepada kaedah yang diterangkan dalam artikel ini. Jadi jika anda menggunakan Bootstrap 5.2 atau lebih baru, anda boleh menggunakan pembolehubah CSS secara langsung untuk mengatasi adat.

Bootstrap, rangka kerja depan web lama ini, disayangi oleh orang lain, dan sesetengah orang mengejeknya. Tidak kira apa perspektif yang anda ambil, ia adalah kerangka UI yang kuat dengan aplikasi yang luas, kebanyakan orang memahami asasnya dan memberikan hasil yang sangat diramalkan.

Bootstrap mempunyai falsafah reka bentuknya sendiri. Ia memerlukan anda untuk membina HTML dengan cara tertentu, menimpa gaya dengan cara tertentu, membina fail teras dengan cara tertentu, dan memasukkannya dengan cara tertentu di laman web. Biasanya, ini adalah OK melainkan rakan sekerja anda menulis kod bootstrap yang buruk, tetapi ia tidak meliputi semua kes penggunaan.

Bootstrap cenderung dihasilkan di sisi pelayan dan tidak suka menulis ganti gaya pada runtime. Jika anda perlu melaksanakan beberapa jenis fungsi tema visual dalam aplikasi anda, Bootstrap mengesyorkan bahawa anda menghasilkan stylesheets berasingan untuk setiap tema dan toggle stylesheets jika diperlukan. Ini adalah cara yang baik untuk melakukan ini jika anda memberi pengguna tema yang telah ditetapkan. Tetapi bagaimana jika anda mahukan tema yang ditentukan oleh pengguna? Anda boleh menyediakan aplikasi anda untuk menjalankan SASS dan menyusun stylesheets baru dan menyimpannya ke pelayan, tetapi itu memerlukan banyak kerja - ditambah anda untuk berkomunikasi dengan kakitangan backend dan pasukan DevOps, yang akan menjadi banyak masalah jika anda hanya mahu, katakan, swap warna primer dan sekunder.

Inilah yang saya hadapi pada masa itu.

Saya membina aplikasi SaaS multi-pengguna menggunakan Django dan Vue yang mempunyai susun atur tetap, tetapi juga perlu mengubah warna jenama untuk setiap akaun pengguna dan mempunyai tema warna lalai automatik. Keperluan lain ialah kami tidak akan menyusun semula aplikasi setiap kali kami menambah pengguna baru. Akhirnya, setiap pemaju backend dan DevOps kini sibuk dengan projek lain, jadi saya perlu membetulkannya sahaja.

Oleh kerana saya tidak mahu menyusun sass pada masa runtime, saya boleh membuat stylesheets dan menyuntiknya ke dalam halaman, tetapi ini bukan penyelesaian yang baik kerana kita memberi tumpuan kepada warna. Lembaran gaya bootstrap yang disusun menjadikan nilai warna sebagai nilai heksadesimal yang jelas, dan (saya hanya memeriksa) terdapat 23 contoh biru utama dalam lembaran styles saya. Untuk warna utama sahaja, saya perlu menulis ganti setiap contoh dan kemudian menyeragamkan lagi untuk warna sekunder, warna amaran, warna bahaya, dan semua konvensyen dan warna lain yang kita mahu ubah. Ia rumit dan mempunyai banyak kerja. Saya tidak mahu berbuat demikian.

Nasib baik, aplikasi baru ini tidak perlu menyokong Internet Explorer 11, yang bermaksud saya boleh menggunakan pembolehubah CSS. Mereka juga hebat, boleh ditakrifkan selepas lembaran gaya dimuatkan, mengalir ke semua arah dan mengubah semua warna yang saya mahu, bukan? Bootstrap menjana senarai besar pembolehubah dalam: elemen akar, jadi ini harus mudah.

Pada ketika ini saya mengetahui bahawa Bootstrap hanya membuat beberapa nilai sebagai pembolehubah dalam lembaran styleshe, dan senarai pembolehubah ini sepenuhnya untuk kegunaan pengguna akhir. Kebanyakan pembolehubah dalam senarai ini tidak dirujuk di seluruh lembaran gaya, jadi mentakrifkan semula mereka tidak mempunyai kesan. (Walau bagaimanapun, perlu diperhatikan bahawa sokongan pembolehubah runtime yang lebih baik boleh disediakan pada masa akan datang.)

Oleh itu, saya mahu lembaran gaya bootstrap saya diberikan dengan pembolehubah CSS yang boleh dikendalikan di sisi pelayan dan bukannya pada nilai warna statik, yang mustahil. Jika anda menetapkan pemboleh ubah warna kepada pembolehubah CSS, SASS tidak akan disusun. Terdapat beberapa helah pintar untuk membuat Sass melakukan ini (satu di sini, dan satu lagi), tetapi mereka memerlukan bootstrap cawangan, dan keluar dari laluan naik taraf memberikan aplikasi saya beberapa kelemahan yang saya tidak sanggup menambah. Jika saya benar -benar jujur, sebab sebenar saya tidak melaksanakan penyelesaian ini adalah bahawa saya tidak dapat mengetahui cara untuk bekerja sama dengan pengkompil SASS saya. Tetapi anda mungkin mempunyai nasib yang lebih baik.

Saya fikir ia bernilai menerangkan aliran kerja pilihan saya di sini. Saya lebih suka menjalankan Sass secara tempatan pada mesin pembangunan saya untuk membina lembaran gaya dan menyerahkan lembaran gaya yang disusun ke repositori. Cadangan amalan terbaik harus menyusun stylesheets semasa penempatan, yang betul, tetapi saya bekerja untuk permulaan yang semakin berkembang. Saya menggunakan SASS kerana saya suka, tetapi jelas topik dalam kerja saya dan saya tidak mempunyai masa, keupayaan atau kekuatan mental untuk mengintegrasikan SASS saya membina dengan pelbagai saluran paip penempatan kami.

Ia juga sejenis pertahanan diri yang jahat: Saya tidak mahu pemaju stack penuh kami berhubung dengan gaya saya yang rumit dan mula menulis apa sahaja yang mereka mahu; baik! Mereka hanya boleh meminta bantuan saya, dan itulah yang saya mahu.

Semua ini berkata: Jika saya tidak dapat mendapatkan stylesheet untuk menjadikan dengan pembolehubah di dalamnya, maka tiada apa yang dapat menghalang saya daripada menyuntiknya ke dalam stylesheet selepas lembaran styleshe dikumpulkan .

Saksikan kuasa carian dan penggantian!

Apa yang perlu kita lakukan ialah masuk ke bootstrap dan cari warna yang kita mahu ganti, yang terletak dengan mudah di: gaya akar di bahagian atas lembaran gaya yang disusun:

 <code>:root { --bs-blue: #002E6D; --bs-indigo: #6610F2; // ... other variables }</code>

Dapatkan nilai contoh-BS-Primary, yang merupakan biru bootstrap kuno. Saya menggunakan Gulp untuk menyusun stylesheets saya, jadi mari kita lihat fungsi tugas sass di gulpfile.js:

 var gulp = memerlukan ('gulp');
var sass = memerlukan ('gulp-sass') (memerlukan ('sass'));
var sourcemaps = memerlukan ('gulp-sourcemaps');
var gulpleplace = memerlukan ('gulp-replace');

fungsi sasscompile () {
  kembali gulp.src ('static/sass/project.scss')
    .pipe (sourceMaps.init ())
    .pipe (sass ({outputStyle: 'diperluas'}))
    .pipe (sourceMaps.write ('.'))
    .pipe (gulPreplace (/#002e6d/ig, 'var (-ct-primary)'))
    .pipe (gulp.dest ('statik/css/'));
}
eksports.sass = sasscompile;

Kumpulkan lembaran styleshe dan kemudian melihatnya.

 : root {
  --bs-blue: var (-ct-primary);
  --bs-indigo: #6610F2;
  // ... pembolehubah lain
}

Hebat, ok, kami kini mempunyai lembaran gaya lengkap yang memerlukan nilai berubah untuk mewakili biru. Perhatikan bahawa ia mengubah warna utama dan "biru". Ini bukan teknik halus. Saya memanggilnya dengan cepat dan kasar kerana alasan, tetapi mendapatkan kawalan penggantian warna yang lebih halus adalah agak mudah jika anda memerlukannya. Sebagai contoh, jika anda ingin menyimpan "biru" dan "utama" sebagai nilai berasingan, masuk ke SASS anda dan mentakrifkan semula pembolehubah SASS $ biru dan $ kepada nilai yang berbeza, maka anda boleh mencari dan menggantikannya secara berasingan seperti yang anda inginkan.

Seterusnya, kita perlu menentukan nilai pembolehubah lalai baru dalam aplikasi. Melakukan ini di tajuk HTML sangat mudah:

<link href="/static/css/project.css" rel="stylesheet">
<style>
  :root {
    --ct-primary: #002E6D;
  }
</style>

Jalankannya dan semuanya akan muncul. Semua yang perlu biru berwarna biru. Ulangi proses ini beberapa kali dan anda tiba -tiba dapat mengawal banyak warna dalam lembaran gaya bootstrap. Ini adalah pembolehubah yang saya pilih untuk memberi kepada pengguna, dan nilai warna lalai mereka:

 --ct-primary: #002E6D;
--ct-primary-hover: #00275D;
// ... pembolehubah lain

Sekarang, keseronokan bermula! Dari sini, anda boleh memanipulasi nilai -nilai lalai ini secara langsung seperti yang diperlukan, atau tambahkan yang kedua: gaya akar di bawah nilai lalai untuk menimpa hanya warna yang anda inginkan. Atau seperti saya, letakkan medan teks dalam profil pengguna yang mengeluarkan: gaya akar ke tajuk anda, menimpa apa sahaja yang anda perlukan. Lihatlah, kini anda boleh menimpa bootstrap semasa runtime tanpa mengulang semula lembaran styleshe atau memandu diri anda gila.

Ini sememangnya bukan penyelesaian yang elegan, tetapi ia menyelesaikan kes penggunaan yang sangat spesifik yang pemaju telah cuba menyelesaikannya selama bertahun -tahun. Dan ini telah terbukti menjadi penyelesaian yang sangat berkesan untuk saya sebelum Bootstrap memutuskan untuk membolehkan kami dengan mudah menimpa pembolehubah semasa runtime.

Atas ialah kandungan terperinci Bootstrap cepat dan kotor menimpa semasa runtime. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!