40 Pertanyaan dan Jawaban Wawancara SASS Teratas (2025)

Berikut adalah pertanyaan dan jawaban wawancara SASS dan SCSS untuk kandidat baru dan berpengalaman untuk mendapatkan pekerjaan impian mereka.

1) Jelaskan apa itu Sass? Bagaimana cara menggunakannya?

Sass adalah singkatan dari Syntactically Awesome Stylesheets dan dibuat oleh Hampton Catlin. Ini adalah perpanjangan dari CSS3, menambahkan aturan bersarang, mixin, variabel, warisan pemilih, dll.

Sass dapat digunakan dalam tiga cara

Sebagai alat baris perintah
Sebagai modul Ruby yang berdiri sendiri
Sebagai plugin untuk kerangka apa pun yang mendukung Rack

Unduh PDF Gratis: Pertanyaan dan Jawaban Wawancara SASS

2) Sebutkan fitur-fitur utama Sass?

Fitur utama untuk Sass meliputi

Kompatibel penuh dengan CSS3
Ekstensi bahasa seperti nesting, variabel, dan mixin
Banyak fungsi berguna untuk memanipulasi warna dan nilai lainnya
Fitur lanjutan seperti arahan kontrol untuk perpustakaan
Output yang diformat dengan baik dan dapat disesuaikan

3) Sebutkan Tipe Data yang didukung SassScript?

SassScript mendukung tujuh tipe data utama

Angka (misalnya; 1,5, 10 piksel)
Rangkaian teks ( g., “foo”, 'bar', dll.)
Warna (biru, #04a3f9)
Boolean (benar atau salah)
Null (misalnya; null)
Daftar nilai, dipisahkan dengan spasi atau koma (g., 1.5em, Arial, Helvetica, dll.)
Memetakan dari satu nilai ke nilai lainnya (g., ( kunci 1: nilai1, kunci 2: Nilai 2))

4) Jelaskan cara mendefinisikan variabel di Sass?

Variabel di Sass diawali dengan tanda ($) dan penugasan variabel dilakukan dengan titik dua (:).

5) Jelaskan apa perbedaan Sass dan SCSS?

Perbedaan antara Sass dan SCSS adalah,

Sas adalah a CSS pra-prosesor dengan kemajuan sintaksis dan ekstensi CSS3
Sass memiliki dua sintaks
Sintaks pertama adalah “SCSS” dan menggunakan ekstensi .scss
Sintaks lainnya adalah sintaksis indentasi atau hanya “Sass” dan menggunakan ekstensi .sass
Meskipun Sass memiliki sintaksis yang longgar dengan spasi dan tanpa titik koma, SCSS lebih mirip dengan CSS

Dokumen CSS apa pun yang valid dapat dikonversi ke Sass hanya dengan mengubah ekstensi dari .CSS menjadi .SCSS.

6) Untuk apa Selector Nesting di Sass digunakan?

Di Sass, penyeleksian bersarang menawarkan cara bagi penulis stylesheet untuk menghitung penyeleksi panjang dengan menyarangkan penyeleksi yang lebih pendek satu sama lain.

7) Jelaskan untuk apa fungsi @extend digunakan di Sass?

Di Sass, arahan @EXTEND menyediakan cara sederhana untuk memungkinkan pemilih mewarisi gaya yang lain. Hal ini bertujuan untuk menyediakan cara bagi pemilih A untuk memperluas gaya dari pemilih B. Saat melakukannya, pemilih A akan ditambahkan ke pemilih B sehingga keduanya berbagi deklarasi yang sama. @EXTEND mencegah penggembungan kode dengan mengelompokkan penyeleksi yang memiliki gaya yang sama ke dalam satu aturan.

8) Jelaskan apa gunanya fungsi @IMPORT di Sass?

Fungsi @IMPORT di Sass

Memperluas aturan impor CSS dengan mengaktifkan impor file SCSS dan Sass
Semua file yang diimpor digabungkan menjadi satu file CSS keluaran
Hampir dapat mencampur dan mencocokkan file apa pun dan memastikan semua gaya Anda
@IMPORT mengambil nama file untuk diimpor

9) Mengapa Sass dianggap lebih baik daripada KURANG?

Saas memungkinkan Anda menulis metode yang dapat digunakan kembali dan menggunakan pernyataan logika, misalnya, loop, dan kondisional
Pengguna Saas dapat mengakses perpustakaan Kompas dan menggunakan beberapa fitur luar biasa seperti pembuatan peta sprite dinamis, peretasan browser lama, dan dukungan lintas-browser untuk fitur CSS3
Kompas juga memungkinkan Anda menambahkan kerangka eksternal seperti Blueprint, Foundation atau Bootstrap di atas
Di LESS, Anda dapat menulis pernyataan logika dasar menggunakan 'guarded mixin', yang setara dengan pernyataan Sass if
Di LESS, Anda dapat mengulang nilai numerik menggunakan fungsi rekursif sementara Sass memungkinkan Anda mengulangi jenis data apa pun
Di Sass, Anda dapat menulis fungsi praktis Anda sendiri

10) Jelaskan apa kegunaan fungsi Mixin di Sass? Apa yang dimaksud dengan MENGERINGKAN mixin?

Mixin memungkinkan Anda menentukan gaya yang dapat digunakan kembali di seluruh stylesheet tanpa perlu menggunakan kelas non-semantik seperti .float-left.

MENGERINGKAN suatu pencampuran berarti membaginya menjadi bagian-bagian yang dinamis dan statis. Mixin dinamis adalah yang sebenarnya akan dipanggil oleh pengguna, dan mixin statis adalah potongan informasi yang jika tidak akan diduplikasi.

11) Jelaskan apa itu Sass Maps dan apa kegunaan Sass Maps?

Peta Sass adalah data terstruktur secara hierarki dan bukan hanya sekumpulan variabel. Ini dapat membantu dalam mengatur kode. Beberapa kegunaan Sass yang hebat adalah

Ini sangat berguna ketika menangani lapisan elemen dalam proyek Anda
Ini dapat membantu dalam manajemen warna ketika ada daftar panjang warna dan bayangan yang berbeda
Gunakan peta ikon untuk berbagai ikon media sosial misalnya: facebook: '\e607' atau twitter: '\e602'
Berbeda dengan perpustakaan pemrograman lainnya, peta Sass hanya akan terdiri dari kode-kode yang akan digunakan

12) Jelaskan perbedaan komentar Sass dengan CSS biasa?

Sintaks komentar pada CSS biasa diawali dengan /* comments…*/, sedangkan pada SASS terdapat dua jenis komentar, yaitu komentar satu baris // dan komentar CSS multiline dengan /* */.

13) Apakah Sass mendukung komentar sebaris?

Komentar satu baris // akan dihapus oleh pra-prosesor .scss dan tidak akan muncul di file .css Anda

Sedangkan komentar */ adalah CSS yang valid, dan akan dipertahankan antara terjemahan dari .scss ke file .css Anda

14) Bagaimana interpolasi digunakan di Sass?

Di Sass, Anda dapat mendefinisikan elemen dalam variabel dan menginterpolasinya di dalam kode Sass. Ini berguna ketika Anda menyimpan modul dalam file terpisah.

15) Jelaskan kapan Anda bisa menggunakan %placeholder di Sass?

%placeholders di Sass berguna ketika Anda ingin menulis gaya yang dimaksudkan untuk diperluas, namun Anda tidak ingin gaya dasar terlihat dalam gaya CSS keluaran

16) Apakah mungkin untuk menyusun variabel di dalam variabel di Sass?

Interpolasi nama variabel saat ini tidak dimungkinkan di Sass. Namun, Anda dapat menggunakan interpolasi placeholder.

17) Apa kelebihan dan kekurangan Sass?

Pro:

Sass mudah dipelajari terutama bagi mereka yang memiliki latar belakang Python, Ruby atau Coffescript dan terbiasa menggunakan fungsi, menulis mixin
CSS dapat dengan mudah dikonversi ke Sass
Sepanjang proyek, Anda tidak perlu mengulangi pernyataan CSS serupa menggunakan atribut @extend
Hal ini memungkinkan untuk menentukan variabel yang dapat digunakan di seluruh proyek
Itu membuat proyek responsif Anda lebih terorganisir

Kekurangan:

Membutuhkan waktu untuk mempelajari fitur-fitur baru praprosesor sebelum menggunakannya
Anda mungkin tidak dapat menggunakan fitur pemeriksa elemen bawaan browser
Pemecahan masalah bisa jadi sulit

18) Jelaskan apa yang KURANG?

LESS adalah bahasa penghasil style sheet dinamis. LESS adalah pra-prosesor CSS dan memperluas CSS dengan perilaku dinamis. Ini memungkinkan variabel, mixin, operasi dan fungsi. LESS berjalan di sisi server dan sisi klien keduanya.

19) Jelaskan cara membuat file KURANG dan di mana menyimpan serta mengkompilasinya?

Membuat atau menyimpan file LESS mirip dengan membuat/menyimpan file CSS. File LESS baru dapat dibuat dengan ekstensi .less, atau Anda dapat mengganti nama file .css yang ada menjadi file .less. Anda dapat menulis kode LESS dengan kode CSS yang ada.

Cara terbaik untuk membuatnya di dalam folder ~/content/ atau ~/Styles/

20) Dalam hal apa LESS dapat digunakan?

Melalui npm LESS dapat digunakan pada baris perintah
Unduh sebagai file skrip untuk browser
Untuk alat pihak ketiga, ini digunakan

21) Bagaimana variabel direpresentasikan dalam LESS?

KURANG memungkinkan variabel untuk didefinisikan. Dalam LESS, variabel direpresentasikan sebagai @sing. Sedangkan penugasan variabel dilakukan dengan tanda: (titik dua) sing. Nilai variabel dimasukkan ke dalam file keluaran CSS serta file yang diperkecil.

22) Jelaskan kegunaan Mixin?

Mixin memungkinkan penyematan semua properti suatu kelas ke dalam kelas lain dengan menyertakan nama kelas sebagai salah satu propertinya. Ini seperti variabel tetapi untuk seluruh kelas.

23) Jelaskan bagaimana cara menyetel kode dalam mode jam tangan saat Anda menjalankan LESS.js dalam sebuah HTML5 peramban?

Jika Anda menjalankan LESS.js di browser HTML5, penyimpanan lokal akan digunakan untuk menyimpan cache CSS yang dihasilkan. Namun dari sudut pandang pengembang, mereka tidak bisa melihat perubahan yang mereka lakukan secara instan. Untuk melihat perubahan Anda secara instan, Anda dapat memuat program dalam mode pengembangan dan tontonan dengan mengikuti JavaScript

<script type= "text/javascript">

less.env = "development " ;

less.watch () ;

</script>

24) Jelaskan apa yang dimaksud dengan bersarang dalam pemrograman LESS?

Bersarang di LESS adalah pengelompokan pernyataan di dalam pernyataan lain, sehingga membentuk sekelompok kode terkait. Dengan kata lain ketika kita menambahkan cuplikan kode dan menambahkan kode lain di dalamnya, maka cuplikan kode tersebut disebut bersarang.

25) Sebutkan fungsi saluran warna apa yang digunakan di LESS?

warna
kejenuhan
hsvhue
kejenuhan
hswalue
merah
hijau
biru
alfa
luma
pencahayaan

26) Jelaskan apa itu data-uri di LESS?

Dalam CSS, Data URI adalah salah satu teknik terbaik, ini memungkinkan pengembang menghindari referensi gambar eksternal dan malah menyematkannya langsung ke dalam stylesheet. URI Data adalah cara terbaik untuk mengurangi permintaan HTTP

27) Jelaskan apa yang dimaksud dengan “Peta Sumber Kurang Sebaris”?

Opsi “ Source Map Less Inline” menunjukkan bahwa kita harus memasukkan semua file CSS ke dalam sourcemap. Artinya, Anda hanya memerlukan file peta untuk mendapatkan sumber aslinya.

28) Jelaskan apa gunanya Perluas “semua” di LESS?

Saat Anda menentukan semua kata kunci terakhir dalam argumen perluasan, ia memerintahkan LESS untuk mencocokkan pemilih tersebut sebagai bagian dari pemilih lain.

29) Jelaskan apa yang dimaksud dengan “StrictImports” di LESS?

strictImports mengontrol apakah kompiler akan mengizinkan @import di dalam blok @media atau blok pemilih lainnya

30) Sebutkan perbedaan antara LESS dan Sass?

Setiap bahasa style-sheet bagus dalam perspektif dan penggunaannya; namun ada sedikit perbedaan dalam penggunaannya.

KURANG	Kelancangan
– LESS menggunakan JavaScript dan diproses di sisi klien	– Sass dikodekan dalam Ruby dan diproses ke sisi server
– Nama variabel diawali dengan @symbol	– Nama variabel diawali dengan simbol $
– LESS tidak mewarisi beberapa penyeleksi dengan satu set properti	– Sass mewarisi beberapa penyeleksi dengan satu set properti
– LESS tidak berfungsi dengan unit “tidak diketahui” dan tidak mengembalikan pemberitahuan kesalahan sintaksis untuk unit yang tidak kompatibel atau kesalahan sintaksis terkait matematika	– Sass memungkinkan Anda bekerja dengan unit “tidak diketahui” juga mengembalikan pemberitahuan kesalahan sintaksis untuk unit yang tidak kompatibel

31) Apa persamaan antara LESS dan Sass?

Antara LESS dan Sass ada persamaannya

Namespaces
Fungsi warna
Mixin dan mixin parametrik
Kemampuan bersarang
Evaluasi JavaScript

32) Jelaskan apa gunanya &combinator ?

&combinator menggabungkan pemilih bersarang dengan pemilih induk. Ini berguna untuk kelas Pseudo seperti :hover dan :focus

33) Jelaskan apa gunanya operasi di LESS?

Operasi dapat digunakan untuk melakukan fungsi seperti

Operator Matematika Sederhana: +, – , *, /
Fungsi warna
Fungsi matematika
Variabel ukuran atau warna apa pun dapat dioperasikan

34) Jelaskan apa gunanya Escaping?

Penggunaan escape di LESS

Saat Anda perlu mengeluarkan CSS yang bukan sintaks CSS yang valid
Sintaks kepemilikan tidak dikenali oleh LESS
Kompiler LESS akan menimbulkan kesalahan jika tidak digunakan
Awalan sederhana dengan simbol ~ dan diberi tanda kutip

35) Apa yang terkandung dalam elemen KURANG?

Lebih sedikit elemen yang mengandung mixin yang umum digunakan seperti

.gradien
.bulat
.kegelapan
.kotak-bayangan
.bayangan dalam

36) Sebutkan alternatif terhadap KURANG?

SASS: Stylesheet yang Mengagumkan Secara Sintaktis
SCSS: Versi.2 dari SASS
Stylus

37) Jelaskan bagaimana Anda dapat memanggil kompiler dari baris perintah?

Anda dapat memanggil kompiler dari baris perintah di LESS as

$ lessc gaya.kurang

Ini akan menampilkan CSS yang dikompilasi stdout; Anda kemudian dapat mengarahkannya ke file pilihan Anda

$ lessc gaya.kurang > gaya.css

38) Apa gunanya fungsi e()?

Dengan bantuan fungsi e() Anda dapat melepaskan nilai sehingga langsung melewati CSS yang dikompilasi, tanpa diketahui oleh kompiler LESS.

39) Jelaskan bagaimana Anda dapat melakukan pra-kompilasi LESS ke dalam CSS?

Untuk melakukan pra-kompilasi LESS ke dalam CSS, Anda dapat menggunakan

Jalankan less.js menggunakan Node.js : Dengan menggunakan kerangka JavaScript Node.js Anda dapat menjalankan skrip less.js di luar browser
Gunakan lessphp: Untuk implementasi kompiler LESS yang ditulis dalam PHP, digunakan lessphp
Gunakan Kompiler online: Gunakan kompiler online untuk kompilasi cepat kode KURANG tanpa menginstal kompiler
Lebih sedikit. app (untuk pengguna Mac): Less.app adalah alat gratis untuk pengguna Mac, alat ini secara otomatis mengkompilasinya menjadi file CSS

40) Jelaskan bagaimana fungsi penggabungan digunakan di LESS?

Untuk menggabungkan nilai dari beberapa properti ke dalam daftar yang dipisahkan spasi atau koma di bawah satu properti LESS digunakan. Ini berguna untuk properti seperti transformasi dan latar belakang

41) Bagaimana cara membuat struktur loop di LESS?

Mixin dapat menyebut dirinya dalam LESS. Mixin rekursif seperti itu, bila dikombinasikan dengan pencocokan Pola dan Ekspresi Penjaga, dapat digunakan untuk membuat berbagai struktur berulang/loop.

42) Mengapa kita memerlukan mixin parametrik di LESS?

Mixin parametrik sama seperti mixin standar. Satu-satunya perbedaan adalah bahwa mixin parametrik mengambil parameter seperti fungsi dalam JavaScript. Setelah menentukan parameter mixin, Anda mendapatkan kontrol lebih besar atas mixin.