Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Avocode
Webdesign

Bagaimana untuk menghasilkan variabel CSS dengan Avocode 3

by
Difficulty:BeginnerLength:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Muhammad Viqqri (you can also view the original English article)

Dalam tutorial ini saya akan memperlihatkan kepada Anda bagaimana untuk menghasilkan variabel CSS  dengan Avocode 3. Kita akan menggunakan desain yang telah diimpor dari desain aplikasi seperti Adobe XD, atau sketsa.

Avocode 3 sebenarnya dapat menghasilkan variabel untuk preprosesor (Sass, KURANG, Stylus, dll.), Tetapi demi kesederhanaan, kami akan bekerja dengan variabel CSS asli. Kami akan membuat variabel untuk warna desain kami, tipografi, dan beberapa layout pilihan. Ini adalah aspek dari produk akhir kami yang mungkin kadang-kadang ingin kami ubah  (itu sangat tidak efisien untuk membuat variabel untuk semuanya).

Avocode 3 dan CSS variabel

Video ini menyertai kursus baru saya, dan desain yang Anda lihat di video itu diambil dari situ. Lihatlah jika Anda tertarik untuk mempelajari lebih lanjut tentang Avocode:

Mulai dengan Warna

Sepanjang Anda mengikuti kursus  Anda akan melihat kami membuat sejumlah contoh besar untuk mempermudah pembuatan skema warna, dan kami memberikan nama masing-masing sesuai dengan tempat yang digunakan dalam desain.

swatches
swatch di Avocode
swatch name
swatch nama

Dengan kami swatch yang dipilih, Anda akan melihat nilai warna aktual ditampilkan di properti. Dalam hal ini adalah #8b959d, jadi sorot dan menyalinnya.

Membuat sebuah Variabel

Di bawah nilai yang Anda miliki memiliki hal penting yang Anda akan lihat di variabel window itu. Klik tombol + untuk menambahkan yang baru.

Pada dialog yang muncul, paste nilai warna ke Bidang Teks yang Diganti.Kemudian, di bidang Variabel Nama, masukkan nama variabel yang ingin Anda gunakan. Sekarang, setiap contoh nilai warna yang ditemukan dalam desain akan diganti dengan variabel

Anda akan melihat kami menggunakan  _color di akhir variabel string kami. Ini sangat membantu setelah kami mengubah ke kode karena kami akan dapat membedakan satu jenis variabel dengan yang lain.

Berikut ini bagaimana memunculkan variabel setelah mereka setting:

Variabel-variabel lainnya

Proses yang sama berlaku untuk variabel lain. Di mana kami menggunakan nilai heksadesimal untuk warna pada contoh pertama, Anda dapat menambahkan  font family, nilai numerik, apa pun yang Anda suka. semua dapat diganti dengan variabel CSS dengan cara yang sama.

Oleh karena itu dapat Anda gunakan variabel untuk sebagian aspek dari CSS Anda. Ukuran, permintaan media, unit pengukuran, itu terserah Anda! Check out video untuk penjelasan lebih lanjut.

Eksport kode

Sekarang untuk bagian yang sangat penting dari semua ini: mengekspor kode CSS yang akan mengambil variabel kami ke browser. Setelah semua variabel Anda siap, di panel variabel klik tombol impor/ekspor.

export code from avocode

Pada dialog yang muncul, menekan tab ekspor. Anda akan menemukan semua variabel yang menunggu untuk Anda untuk menyalin. Anda kemudian dapat menyisipkan variabel ke dalam stylesheet, tapi pastikan Anda menyertakan: elemen root ke sarang mereka semua dalam, seperti:

Anda mungkin kemudian menemukan berguna untuk mengatur variabel Anda dalam stylesheet ini sehingga mereka akan lebih mudah untuk mengelola (warna dengan warna, typgraphic variabel dengan satu sama lain dan sebagainya).

Kesimpulan

Itu adalah bagaimana Anda dapat menghasilkan CSS variabel dari desain menggunakan Avocode! Hal ini jauh lebih cepat melakukan ini daripada coding CSS variabel dengan tangan, jadi itu adalah fitur yang sangat berguna yang saya yakin Anda akan menikmati menggunakan.

Pelajari lebih lanjut

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.