Sass - Pertanyaan Wawancara

SASS (Syntactically Awesome Stylesheet) adalah pra-prosesor CSS yang membantu mengurangi pengulangan dengan CSS dan menghemat waktu. Ini adalah bahasa ekstensi CSS yang lebih stabil dan kuat yang menggambarkan gaya dokumen dengan rapi dan terstruktur.

• Ini adalah bahasa pra-pemrosesan yang menyediakan sintaks berlekuk (sintaksnya sendiri) untuk CSS.

• Ini memungkinkan penulisan kode lebih efisien dan mudah dikelola.

• Ini adalah kumpulan CSS super yang berisi semua fitur CSS dan merupakan pra-prosesor open source, dengan kode Ruby.

• Ini memberikan gaya dokumen dalam format struktur yang baik daripada CSS datar.

• Ini menggunakan metode yang dapat digunakan kembali, pernyataan logika dan beberapa fungsi bawaan seperti manipulasi warna, matematika dan daftar parameter.

• Ini lebih stabil, kuat dan kompatibel dengan versi CSS.

• Ini adalah kumpulan CSS super dan didasarkan pada JavaScript.

• Ini dikenal sebagai gula sintaksis untuk CSS yang berarti memudahkan pengguna untuk membaca atau mengekspresikan sesuatu dengan lebih jelas.

• Ini menggunakan sintaksnya sendiri dan mengkompilasi ke CSS yang dapat dibaca.

• Anda dapat dengan mudah menulis CSS dalam lebih sedikit kode dalam waktu yang lebih singkat.

• Ini adalah pra-prosesor open source yang diinterpretasikan ke dalam CSS.

• Ini memungkinkan penulisan CSS yang bersih dalam konstruksi pemrograman.

• Ini membantu dalam menulis CSS lebih cepat.

• Ini adalah superset dari CSS yang membantu desainer dan pengembang bekerja lebih efisien dan cepat.

• Karena Sass kompatibel dengan semua versi CSS, kita dapat menggunakan pustaka CSS yang tersedia.

• Dimungkinkan untuk menggunakan sintaks bertingkat dan fungsi yang berguna seperti manipulasi warna, matematika, dan nilai lainnya.

• Perlu waktu bagi pengembang untuk mempelajari fitur-fitur baru yang ada di pra-prosesor ini.

• Jika lebih banyak orang yang bekerja di situs yang sama, maka akan menggunakan preprocessor yang sama. Beberapa orang menggunakan Sass dan beberapa orang menggunakan CSS untuk mengedit file secara langsung. Sehingga akan menjadi sulit untuk bekerja dengan situs.

• Ada kemungkinan kehilangan manfaat dari pemeriksa elemen bawaan browser.

SASS mendukung dua sintaks yaitu SCSS dan Indented sintaksis.

• Itu SCSS (Sassy CSS)adalah ekstensi sintaks CSS yang membuat lebih mudah untuk mempertahankan stylesheet besar dan dapat mengenali sintaks khusus vendor dan banyak CSS. File SCSS menggunakan ekstensi.scss.

• Itu Indented adalah sintaks yang lebih lama dan terkadang disebut sebagai Sass. Menggunakan bentuk sintaks ini, CSS dapat ditulis secara ringkas. File SASS menggunakan ekstensi.sass.

Anda dapat menggunakan SASS dengan tiga cara berbeda -

• Sebagai alat baris perintah

• Sebagai modul Ruby

• Sebagai plugin untuk kerangka kerja Rack enable

Nesting menggabungkan struktur logika yang berbeda. Dengan menggunakan SASS, kita dapat menggabungkan beberapa aturan CSS satu sama lain. Jika Anda menggunakan banyak selektor, Anda dapat menggunakan satu selektor di dalam selektor lainnya untuk membuat pemilih majemuk.

Anda dapat memilih pemilih induk dengan menggunakan &karakter. Ini memberi tahu di mana pemilih induk harus dimasukkan.

SASS mendukung pemilih placeholder menggunakan pemilih kelas atau id . Dalam CSS normal, ini ditentukan dengan "#" atau ".", tapi di SASS diganti dengan"%".

Ada 5 jenis operasi -

• Operasi Nomor

• Operasi Warna

• Operasi String

• Operasi Boolean

• Operasi Daftar

Ini memungkinkan untuk operasi matematika seperti penjumlahan, pengurangan, perkalian dan pembagian.

Ini memungkinkan penggunaan komponen warna bersama dengan operasi aritmatika.

Daftar mewakili rangkaian nilai yang dipisahkan menggunakan koma atau spasi.

Anda dapat melakukan operasi boolean pada skrip Sass dengan menggunakan dan, atau dan bukan operator.

Tanda kurung adalah pasangan tanda yang biasanya ditandai dengan tanda kurung bulat () atau tanda kurung siku [] yang memberikan logika simbolik yang mempengaruhi urutan operasi.

Ini menyediakan variabel SassScript di pemilih dan nama properti menggunakan #{ }sintaksis. Anda dapat menentukan variabel atau nama properti dalam tanda kurung kurawal.

Anda dapat menyetel nilai default untuk variabel dengan menambahkan ! Tanda default di akhir nilai variabel. Ini tidak akan menetapkan kembali nilainya, jika sudah ditetapkan ke variabel.

Ini secara langsung mengambil nama file untuk diimpor dan semua file yang diimpor akan digabungkan dalam satu file CSS.

Ini mengatur aturan gaya untuk jenis media yang berbeda.

Ini digunakan untuk berbagi aturan dan hubungan antara penyeleksi. Itu dapat memperluas semua gaya kelas lain dalam satu kelas dan juga dapat menerapkan gaya spesifiknya sendiri.

Ini adalah kumpulan aturan bersarang yang mampu membuat blok gaya di root dokumen.

Ini digunakan untuk mengeksekusi pernyataan kode secara selektif berdasarkan hasil evaluasi ekspresi.

Pernyataan @else if digunakan dengan direktif @if, setiap kali pernyataan @if gagal maka pernyataan @else if dicoba dan jika juga gagal maka @else dijalankan.

Ini memungkinkan Anda untuk menghasilkan gaya dalam satu lingkaran. Variabel penghitung digunakan untuk mengatur keluaran untuk setiap iterasi.

Dalam direktif @each, variabel didefinisikan yang berisi nilai setiap item dalam daftar.

Ini digunakan untuk mendefinisikan mixin yang menyertakan variabel dan argumen opsional setelah nama mixin.

Ini digunakan untuk menyertakan mixin dalam dokumen dan gaya yang ditentukan oleh mixin dapat disertakan ke dalam aturan saat ini.

Nilai SassScript dapat dianggap sebagai argumen di mixin yang diberikan saat mixin disertakan dan tersedia sebagai variabel dalam mixin.

Ada dua jenis argumen mixin -

• Argumen Kata Kunci

• Argumen Variabel

Ini digunakan untuk memasukkan argumen dalam mixin. Argumen yang diberi nama dapat dikirimkan dalam urutan apa pun dan nilai default argumen dapat dihilangkan.

Argumen variabel digunakan untuk meneruskan sejumlah argumen ke mixin. Ini berisi argumen kata kunci yang diteruskan ke fungsi atau mixin.

Dengan menggunakan function directive, Anda dapat membuat fungsi Anda sendiri dan menggunakannya dalam konteks skrip Anda atau dapat digunakan dengan nilai apa pun.

File CSS yang dihasilkan SASS terdiri dari gaya CSS default yang mencerminkan struktur dokumen. Gaya CSS default bagus tetapi mungkin tidak cocok untuk semua situasi.

Gaya bertingkat adalah gaya default SASS. Cara penataan gaya ini sangat berguna saat Anda berurusan dengan file CSS yang besar.

Dalam gaya keluaran yang diperluas, setiap properti dan aturan memiliki barisnya sendiri. Dibutuhkan lebih banyak ruang dibandingkan dengan gaya CSS bertingkat.

Gaya CSS ringkas secara kompetitif membutuhkan lebih sedikit ruang daripada Diperluas dan Bersarang. Ini berfokus terutama pada penyeleksi daripada propertinya.

Gaya CSS terkompresi membutuhkan lebih sedikit ruang dibandingkan dengan semua gaya lainnya. Ini menyediakan spasi putih hanya untuk memisahkan pemilih dan baris baru di akhir file.

• Ini menggunakan lekukan daripada{ dan } untuk membatasi blok.

• Untuk memisahkan pernyataan, ini menggunakan baris baru, bukan titik koma (;) .

• Deklarasi properti dan pemilih harus ditempatkan pada baris dan pernyataannya sendiri di dalamnya{ dan }harus ditempatkan di baris baru dan menjorok ke dalam .

• Ini menggunakan lekukan daripada{ dan } untuk membatasi blok.

• Untuk memisahkan pernyataan, ini menggunakan baris baru, bukan titik koma (;) .

• Deklarasi properti dan pemilih harus ditempatkan pada baris dan pernyataannya sendiri di dalamnya{ dan }harus ditempatkan di baris baru dan menjorok ke dalam .

Properti CSS dapat dideklarasikan dengan dua cara -

• Properti dapat dideklarasikan mirip dengan CSS tetapi tanpa semicolon(;).

• colon(:) akan diawali dengan setiap nama properti.

Anda dapat menggunakan = untuk direktif @mixin dan + untuk @include direktif yang membutuhkan lebih sedikit pengetikan dan membuat kode Anda lebih sederhana, dan lebih mudah dibaca.

sass --watch C: \ ruby ​​\ lib \ sass \ style.scss: style.css

Komentar mengambil seluruh baris dan menyertakan semua teks yang disarangkan di bawahnya dan berbasis baris dalam sintaks yang menjorok ke dalam.

sass input.scss output.css

• Pertama, ia memeriksa byte Unicode, deklarasi @charset berikutnya, dan kemudian pengkodean string Ruby.

• Selanjutnya, jika tidak ada yang disetel, encoding charset dianggap sebagai UTF-8 .

• Tentukan pengkodean karakter secara eksplisit menggunakan deklarasi @charset . Cukup gunakan "@charset encoding name" di awal stylesheet dan SASS akan menganggap bahwa ini adalah pengkodean karakter yang diberikan.

• Jika file keluaran SASS berisi karakter non ASCII, maka akan menggunakan deklarasi @charset .

Sass mendukung dua jenis komentar -

• Multiline comments- Ini ditulis menggunakan / * dan * /. Komentar multiline dipertahankan dalam keluaran CSS.

• Single line comments - Ini ditulis menggunakan //diikuti dengan komentar. komentar satu baris tidak disimpan dalam keluaran CSS.

Ini mengevaluasi ekspresi SassScript menggunakan baris perintah. Anda dapat menjalankan shell dengan baris perintah sass bersama dengan opsi - i .

Ini mendeteksi kesalahan dan menampilkan nilai ekspresi SassScript ke aliran keluaran kesalahan standar.

Ini menampilkan nilai ekspresi SassScript sebagai kesalahan fatal.