Alchemy Warna dengan Kurang: Membuat Skim Warna dan Palet-tutorial css-php.cn

Warna adalah salah satu elemen yang paling penting dalam mana -mana reka bentuk visual. Apabila digunakan dengan betul, ia boleh memberi impak besar kepada laman web atau aplikasi anda. Tetapi mengetahui teori warna semata -mata tidak mencukupi untuk mencapai kesan sedemikian. Anda perlu mempunyai tali pinggang alat yang betul untuk beroperasi dengan mudah dan berjaya dengan pelbagai warna. Nasib baik, kurang menyelesaikan masalah praktikal ini dengan menyediakan banyak fungsi warna untuk bekerja dengan. Color Alchemy with Less: Creating Color Schemes and Palettes

Dalam tutorial ini, saya akan meneroka cara menggunakan beberapa fungsi warna ini, bersempena dengan ciri -ciri kurang lain, untuk menghasilkan campuran yang fleksibel dan boleh diguna semula untuk manipulasi warna.

Alchemy Warna dengan Kurang: Membuat Skim Warna dan Palet Takeaways Key

Kurang menyediakan pelbagai fungsi warna yang boleh digunakan untuk membuat skema warna dan palet yang berkesan untuk reka bentuk web. Fungsi -fungsi ini boleh digunakan bersempena dengan ciri -ciri kurang lain untuk menghasilkan campuran yang fleksibel dan boleh diguna semula untuk manipulasi warna.

Membuat skema warna dengan kurang melibatkan menentukan warna asas dan kemudian menggunakan fungsi putaran () untuk membuat variasi warna. Varian ini boleh dimasukkan ke dalam senarai dan diekstrak seperti yang diperlukan, yang membolehkan penciptaan pelbagai jenis skim warna.

Kurang boleh digunakan untuk menghasilkan pelbagai jenis palet warna melalui penggunaan gelung dan pernyataan bersyarat. Fungsi putaran () boleh digunakan untuk membuat spektrum warna penuh, manakala fungsi ringan () dan gelap () boleh digunakan untuk membuat warna dan warna warna tertentu.

Penggunaan kurang untuk Alchemy Warna menawarkan beberapa manfaat, termasuk penciptaan skema warna yang konsisten dan harmoni, kemudahan menyesuaikan skema warna dengan hanya mengubah warna asas, dan keupayaan untuk membuat skema warna berskala dan boleh diguna semula.

Kaedah ini menggunakan pembolehubah dan fungsi spin () kurang untuk membuat skema warna (triad, dalam kes kita). Ini berfungsi dengan baik, tetapi bagi saya ia tidak boleh diguna semula dan tidak cukup fleksibel. Nasib baik, isu ini dapat diselesaikan dengan menggunakan mixins. Mari lihat apa yang saya maksudkan.

Kod di atas mencipta tiga jenis skema warna. Saya akan menerangkan hanya yang terakhir, kerana dua yang pertama mempunyai struktur yang sama dan mereka tidak memerlukan penjelasan individu.

.Quad () Mixin mengambil tiga parameter. Yang pertama menetapkan warna asas untuk skema. Yang kedua memberitahu Mixin yang variasi warna untuk kembali. Dan yang ketiga mentakrifkan harta CSS yang digunakan apabila kurang menyusun kod. Di dalam badan Mixin, fungsi putaran () mencipta tiga varian warna yang ada dalam skema quad, maka varian ini dimasukkan ke dalam senarai. Fungsi ekstrak () mendapat varian yang dikehendaki, yang ditakrifkan dalam parameter kedua. Dan akhirnya, dengan bantuan interpolasi berubah -ubah, varian warna diberikan kepada harta CSS yang ditakrifkan.

kita kini boleh meletakkan kod di atas dalam fail berasingan yang dipanggil color_schemes.less dan gunakannya seperti berikut:

@<span>base-color: #00ff00;
</span>@<span>triad-secondary: spin(@base-color, 120);
</span>@<span>triad-tertiary: spin(@base-color, -120);</span>

Salin selepas log masuk

di sini kami mengimport fail dengan skema warna, dan kemudian kami menentukan warna asas untuk laman web atau aplikasi kami. Tiga baris terakhir dalam set peraturan div, tentukan warna untuk sifat-sifat warna, warna, dan warna latar belakang.

Seperti yang anda lihat, mixin boleh digunakan dengan mana -mana harta yang nilai yang dijangkakan adalah warna. Selain itu, ia sangat mudah untuk melihat harta yang digunakan suatu pernyataan tertentu; Lihat saja, dan ledakan, kita tahu. Sebagai contoh, dalam pernyataan terakhir, anda dapat melihat dengan jelas bahawa varian warna pertama skema quad akan digunakan sebagai nilai untuk sifat warna latar belakang. Cukup keren, huh?

dan inilah output yang disusun:

.<span>analog(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 30);
</span>  @<span>second: spin(@color, -30);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>triad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 120);
</span>  @<span>second: spin(@color, -120);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>quad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 90);
</span>  @<span>second: spin(@color, -90);
</span>  @<span>third: spin(@color, 180);
</span>  @<span>list: @first, @second, @third;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}</span>

Salin selepas log masuk

lihat pena xwxmep oleh sitepoint (@sitePoint) pada codepen.

Menjana palet warna

Dalam bahagian ini, saya akan menunjukkan kepada anda cara membuat pelbagai jenis palet warna. Untuk tujuan itu, saya akan menggunakan gelung yang kurang khusus dan pernyataan bersyarat (Pengawal Mixin). Jika anda tidak biasa dengan mereka yang membina, anda boleh melihat dengan cepat artikel saya sebelum ini mengenai topik ini.

Dalam contoh pertama, saya akan membuat campuran yang menghasilkan jadual warna. Anda telah menggunakan pemetik warna, bukan? Jadi, anda tahu apa yang saya maksudkan.

<span>@import "color_schemes.less";
</span>
<span><span>@base-color: #00ff00; 
</span></span><span>
</span><span>div {
</span>  <span>width: 200px;
</span>  <span>height: 100px;
</span>  <span>border: thick solid;
</span>  .<span>quad(@base-color, 3, border-color);
</span>  .<span>quad(@base-color, 2, color);
</span>  .<span>quad(@base-color, 1, background-color);
</span><span>}</span>

Salin selepas log masuk

. Color-Palette () Mixin mengambil tiga hujah sebenar. Yang pertama mentakrifkan warna asas untuk palet. Yang kedua mentakrifkan berapa banyak swatch untuk menjana. Dan yang ketiga menetapkan langkah putaran yang diperlukan untuk fungsi putaran ().

Sebenarnya, terdapat satu lagi hujah: @Index. Tetapi ia hanya digunakan secara dalaman untuk membuat kerja gelung. Seperti yang ditetapkan dalam kod di atas, gelung akan berulang 25 kali melalui kod, mewujudkan 25 kelas CSS - satu untuk setiap swatch. Setiap nama kelas akan dibina mengikut corak .swatch- [nombor] (contohnya, .swatch-1).

Warna untuk setiap swatch dihasilkan dengan menggunakan nilai yang diperoleh dari pendaraban indeks semasa dengan langkah putaran. Nilai itu ditambah kepada nilai warna asas untuk setiap lelaran gelung. Ini menghasilkan spektrum warna penuh, bermula dan berakhir dengan warna yang sama (merah, dalam kes kita).

inilah output yang disusun:

@<span>base-color: #00ff00;
</span>@<span>triad-secondary: spin(@base-color, 120);
</span>@<span>triad-tertiary: spin(@base-color, -120);</span>

Salin selepas log masuk

lihat pena menghasilkan palet warna dengan kurang oleh sitepoint (@sitePoint) pada codepen.

Mixin ini boleh digunakan untuk membuat apa -apa jenis jadual warna - dengan bilangan swatch, dan dengan langkah putaran yang lebih besar atau lebih kecil. Sebagai contoh, anda boleh menjana hanya empat swatch dengan langkah putaran 90 darjah, yang akan menghasilkan swatch untuk skema warna persegi. Anda mempunyai kemungkinan yang tidak berkesudahan. Teruskanlah dan lakukan eksperimen anda sendiri.

Dalam contoh seterusnya, kami akan membuat campuran yang menghasilkan warna dan warna warna tertentu. Menurut Wikipedia:

warna adalah campuran warna dengan putih, yang meningkatkan cahaya, dan teduh adalah campuran warna dengan hitam, yang mengurangkan cahaya.

Seperti yang akan kita lihat dalam satu minit, warna dan warna dapat dicipta dengan mudah dengan bantuan Less Lighten () dan gelap () fungsi terbina dalam.

.<span>analog(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 30);
</span>  @<span>second: spin(@color, -30);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>triad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 120);
</span>  @<span>second: spin(@color, -120);
</span>  @<span>list: @first, @second;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}
</span>
.<span>quad(@color, @variant, @property) {
</span>  @<span>first: spin(@color, 90);
</span>  @<span>second: spin(@color, -90);
</span>  @<span>third: spin(@color, 180);
</span>  @<span>list: @first, @second, @third;
</span>  <span>@return: extract(@list, @variant);
</span>  @<span>{property}: @return;
</span><span>}</span>

Salin selepas log masuk

Versi ini. Color-Palette () Mixin mengambil dua hujah sebenar-jenis palet (warna atau warna), dan warna asas. Untuk menjadikan kemungkinan beralih antara warna dan warna, pengendali & pengendali digunakan bersamaan dengan kata kunci apabila. Ini bermakna jika kita menggunakan "warna" sebagai parameter pertama, kod dengan fungsi gelap () akan digunakan.

Warna latar dalam kedua -dua kes dihasilkan oleh fungsi cahaya () atau gelap (), yang menggunakan warna asas yang ditakrifkan dan indeks semasa didarabkan sebanyak sepuluh peratus. Perhatikan parameter relatif. Adalah penting untuk memasukkannya supaya pelarasan adalah relatif kepada nilai semasa.

Nota: Jangan bimbang bahawa kedua -dua mixins berkongsi satu dan nama yang sama. Terima kasih kepada ciri-ciri corak yang sepadan, kurang akan tahu mana yang hendak digunakan.

inilah output yang disusun:

<span>@import "color_schemes.less";
</span>
<span><span>@base-color: #00ff00; 
</span></span><span>
</span><span>div {
</span>  <span>width: 200px;
</span>  <span>height: 100px;
</span>  <span>border: thick solid;
</span>  .<span>quad(@base-color, 3, border-color);
</span>  .<span>quad(@base-color, 2, color);
</span>  .<span>quad(@base-color, 1, background-color);
</span><span>}</span>

Salin selepas log masuk

lihat pena menghasilkan swatch warna dengan kurang oleh sitepoint (@sitePoint) pada codepen.

Ringkasan

Terdapat banyak perkara lain yang boleh anda lakukan dengan warna dan dengan banyak fungsi warna yang disediakan oleh kurang. Tetapi hei, anda tidak mahu tutorial 10,000 perkataan, bukan? Contoh -contoh yang diberikan sudah cukup untuk memulakan anda dan memberi anda gambaran keseluruhan kemungkinan yang ada. Terserah kepada anda untuk menyelam lebih mendalam dan terus bereksperimen. Gembira kurang pengekodan!

soalan yang sering ditanya mengenai alkimia warna dengan kurang

Apa itu Alchemy Warna dengan kurang dan bagaimana ia berfungsi? Ia membolehkan anda menentukan pembolehubah, campuran, fungsi, dan banyak teknik lain yang membolehkan anda membuat CSS yang lebih mudah diselenggarakan, boleh dibayangkan, dan diperluaskan. Dengan kurang, anda boleh membuat warna asas dan kemudian menggunakan fungsi untuk meringankan, gelap, tepu, desaturate, berputar, dan campuran warna, membuat skema warna harmoni untuk laman web atau aplikasi anda. Skema warna menggunakan kurang?

Membuat skema warna menggunakan kurang melibatkan menentukan warna asas dan kemudian menggunakan fungsi kurang untuk membuat variasi warna itu. Sebagai contoh, anda boleh menggunakan fungsi Lighten and Darken untuk mencipta warna yang lebih ringan dan lebih gelap dari warna asas. Anda juga boleh menggunakan fungsi tepu dan desaturate untuk menyesuaikan intensiti warna, dan fungsi putaran untuk menghasilkan warna pelengkap. Dengan menggabungkan fungsi -fungsi ini, anda boleh membuat pelbagai skema warna. Ia membolehkan anda membuat skim warna yang konsisten dan harmoni, yang dapat meningkatkan daya tarikan visual laman web atau aplikasi anda. Ia juga memudahkan untuk menyesuaikan skema warna anda, kerana anda hanya boleh menukar warna asas dan seluruh warna akan dikemas kini secara automatik. Di samping itu, kurang membolehkan anda membuat skema warna yang berskala dan boleh diguna semula, yang dapat menjimatkan masa dan usaha anda dalam jangka masa panjang. > Kurang sama dengan preprocessors CSS lain seperti SASS dari segi keupayaannya untuk membuat skema warna. Walau bagaimanapun, kurang mempunyai sintaks yang lebih mudah dan lebih mudah dipelajari, menjadikannya pilihan yang baik untuk pemula. Ia juga mempunyai satu set fungsi yang mantap untuk memanipulasi warna, yang dapat memberi anda lebih banyak kawalan ke atas skema warna anda. Digunakan untuk reka bentuk web, anda juga boleh menggunakannya untuk reka bentuk cetak. Anda boleh membuat skema warna menggunakan kurang dan kemudian mengeksportnya sebagai fail CSS, yang boleh digunakan dalam perisian reka bentuk cetak. Walau bagaimanapun, perlu diingat bahawa warna mungkin kelihatan berbeza di skrin dan dalam cetakan kerana perbezaan ruang warna. dalam talian untuk mengetahui lebih lanjut mengenai Alchemy Color dengan kurang. Anda boleh memulakan dengan membaca dokumentasi kurang rasmi, yang memberikan gambaran keseluruhan bahasa dan ciri -cirinya. Terdapat juga banyak tutorial dan panduan yang boleh membimbing anda melalui proses membuat skema warna dengan kurang.

Bolehkah saya menggunakan Alchemy Color dengan kurang untuk reka bentuk aplikasi mudah alih?

Ya, anda boleh menggunakan Alchemy Color dengan kurang untuk reka bentuk aplikasi mudah alih. Kurang membolehkan anda membuat skema warna yang konsisten yang boleh digunakan di platform yang berbeza, termasuk aplikasi mudah alih. Ini dapat membantu memastikan pengalaman pengguna yang konsisten di semua platform. Tulis kod kurang anda dan pengkompil yang kurang untuk menyusun kod kurang anda ke dalam CSS. Terdapat banyak editor teks percuma dan berbayar dan kurang penyusun yang tersedia, jadi anda boleh memilih yang paling sesuai dengan keperluan dan keutamaan anda.

Ya, anda boleh menggunakan Alchemy Warna dengan kurang walaupun anda buta warna. Kurang membolehkan anda membuat skema warna berdasarkan fungsi matematik, jadi anda tidak perlu bergantung pada persepsi warna anda. Walau bagaimanapun, anda mungkin ingin mendapatkan maklum balas daripada orang lain untuk memastikan skema warna anda secara visual menarik dan boleh diakses oleh semua pengguna. Mempunyai masalah dengan skema warna yang kurang anda, terdapat beberapa langkah yang boleh anda ambil. Pertama, periksa kod kurang anda untuk kesilapan. Jika kod anda betul, cuba menyesuaikan warna asas anda atau parameter fungsi anda. Jika anda masih mempunyai masalah, pertimbangkan untuk mendapatkan bantuan daripada komuniti kurang atau pereka web profesional.

Atas ialah kandungan terperinci Alchemy Warna dengan Kurang: Membuat Skim Warna dan Palet. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!