Cara menggunakan css – SCSS adalah sintaks yang digunakan untuk bahasa scripting SASS, atau Syntacticically Awesome Style Sheet. Sintaks ini dapat digunakan untuk meningkatkan keterbacaan kode CSS secara signifikan. Ini menawarkan banyak fitur canggih yang akan memudahkan Anda mempersingkat kode Anda. Karena lebih maju dari CSS, kadang-kadang diciptakan sebagai Sassy CSS. Pada artikel ini, kita akan belajar lebih banyak tentang apa yang membuat style sheet ini begitu lancang.

cara menggunakan css

Memulai Dengan SASS

Bergantung pada preferensi Anda, SASS dapat diinstal dengan berbagai cara. Ada beberapa aplikasi gratis yang memungkinkan Anda mengaktifkan dan menjalankan SASS dalam waktu singkat. Itu juga dapat diinstal langsung dari baris perintah. Jika Anda belum menginstal SASS, luangkan waktu untuk menjelajahi opsi Anda di sini: Panduan Instalasi SASS .

See also  Melakukan Wawancara Teknis

Variabel

SCSS memanfaatkan variabel. Tidak seperti CSS, di mana Anda harus memanggil var()fungsi untuk membuat variabel, SCSS memungkinkan Anda membuat variabel secara langsung. Ini bagus untuk melacak hal-hal seperti font, warna, dan ukuran yang Anda tahu akan Anda gunakan berulang kali.

Kami menginisiasi sebuah variabel bernama black dan font-type menggunakan simbol, $, dan mendefinisikan masing-masing dengan nilai output yang diinginkan. Kami kemudian dapat memanggil setiap variabel dengan memanggil namanya dimulai dengan $.

Ketika kode kita menjadi lebih panjang, melacak hal-hal bisa menjadi membosankan. Variabel adalah cara yang bagus untuk menyimpan item yang ingin kita gunakan nanti. Mereka bisa menjadi wadah untuk banyak hal termasuk string, boolean, angka, warna, dan banyak lagi. Menyimpan item yang biasa digunakan ini dalam variabel dapat membuat kode Anda lebih pendek dan lebih mudah dibaca.

See also  Bias dalam Analisis Data

Nesting

Saat mendefinisikan aturan dalam cara menggunakan css, mereka harus didefinisikan satu demi satu. CSS tidak mengizinkan Nesting. Namun, ini bisa dilakukan di SCSS.
Setiap elemen anak bersarang di dalam elemen induk dari nav. Struktur hierarkis di SCSS membuat pencarian dan perubahan elemen jauh lebih mudah.

Mengimpor File

SCSS memiliki peningkatan besar untuk mengimpor file. Di CSS, saat file diimpor, permintaan HTTP dibuat setiap kali file dipanggil. SCSS menghilangkan ini dengan langsung memasukkan file ke dalam kode CSS. Ini meningkatkan runtime dan kinerja kode Anda.
Saat menggunakan SASS, tidak perlu menyertakan ekstensi file dalam nama file. SASS secara otomatis menganggap Anda mengimpor file .sass atau .scss .Anda dapat mengimpor file ini ke file lain dengan menyertakan baris impor di bagian paling atas file Anda.

See also  Penyiapan Akun AWS

Mixin

SASS menyertakan fitur yang disebut mixin yang memungkinkan Anda menggunakan kembali cuplikan kode CSS di mana pun Anda mau. Setelah Anda membuat mixin, Anda dapat menggunakannya Jika kita ingin membuat mixin untuk menyorot bagian teks yang menurut kita penting,
Kemudian kita bisa memanggilnya kemanapun kita mau. Mari kita coba ini dengan berpura-pura kita memiliki sebuah kelas bernama .highlightdan kita ingin menggunakan mixin kita di dalamnya.
Penggunaan mixin menghilangkan kebutuhan untuk mengulang sendiri, menghasilkan kode yang lebih bersih.

By Admin