SASS, atau Helaian Gaya Hebat Secara Syntactically, ialah bahasa penskripan prapemproses yang sangat popular di kalangan pembangun, digunakan untuk meningkatkan kefungsian CSS. SASS membenarkan pembangun menggunakan pembolehubah, sarang, campuran dan ciri lanjutan lain yang tidak tersedia dalam CSS.
Salah satu ciri utama menggunakan SASS ialah keupayaan untuk mengisytiharkan pembolehubah yang tidak lebih daripada pemegang tempat untuk nilai yang boleh kami gunakan semula sepanjang helaian gaya aplikasi web kami. Pembolehubah membantu menjimatkan masa dan usaha pembangun dengan membenarkan mereka mengemas kini berbilang nilai sekaligus dengan menjadikan kod lebih mudah dibaca dan lebih mudah diselenggara.
Kadangkala, kita mungkin mahu menetapkan pembolehubah kepada kosong, yang dalam bahasa lain bermaksud menetapkan pembolehubah kepada null atau undefined. Ini berguna apabila kita ingin mencipta pembolehubah pemegang tempat dan boleh memberikan nilai kepadanya kemudian dalam aplikasi. Dalam artikel ini, kita akan belajar cara menetapkan pembolehubah tidak sama dengan apa-apa dalam SASS.
Untuk menjalankan SASS dalam HTML, pastikan anda memasang pengkompil SASS dalam IDE anda (sama seperti dalam Kod VS), muat turun dan pasang pengkompil SASS menggunakan arahan berikut -
npm install -g sass
Ini akan memasang pengkompil SASS secara global pada sistem anda. Seterusnya, buat fail baharu dengan sambungan .scss yang akan mengandungi kod SASS kami.
Selepas itu, import fail SASS ke dalam fail HTML. Dalam fail HTML, tambahkan pautan ke fail SASS anda menggunakan teg 'pautan' di bahagian kepala. Atribut rel pautan hendaklah ditetapkan kepada "stylesheet" dan atribut hrefnya hendaklah ditetapkan pada laluan ke fail SASS anda.
Untuk menetapkan pembolehubah tidak sama dengan sebarang nilai, terdapat beberapa cara, seperti menggunakan kata kunci nol, fungsi tidak ditetapkan atau kaedah interpolasi #{}. Mari kita bincangkan semua kaedah ini secara terperinci satu per satu.
Dalam SASS, kata kunci nol digunakan untuk menunjukkan ketiadaan nilai. Apabila pembolehubah ditetapkan kepada null, ini bermakna pembolehubah itu belum diberikan sebarang nilai. Ini berguna apabila anda ingin mengisytiharkan pembolehubah tetapi tidak mahu memberikan nilai kepadanya dengan segera.
Untuk menetapkan pembolehubah supaya tidak sama dengan apa-apa dalam SASS, hanya gunakan kata kunci nol seperti yang ditunjukkan di bawah -
$newVar: null;
Sebagai alternatif, kita boleh menetapkan pembolehubah kepada null dengan memberikannya kepada pembolehubah yang telah ditetapkan kepada null
$newOtherVar: $newVar;
Mari lihat contoh lengkap cara menetapkan pembolehubah kepada tiada menggunakan kata kunci nol.
<!DOCTYPE html>
<html>
<head>
<title>Example to set the variable to equal nothing using null keyword</title>
<style>
/* Add the CSS compiled code below */
</style>
</head>
<body>
<h1>Welcome to Tutorialspoint!</h1>
<p>The one stop solution to learn technology articles.</p>
</body>
</html>
Di bawah ialah kod SASS di mana kami mengisytiharkan pembolehubah $newVar dengan nilai yang sama dengan null.
$newVar: null;
body {
background-color: $newVar;
color: $newVar;
font-size: $newVar;
}
Di bawah ialah kod tersusun yang dihasilkan selepas menyusun kod SASS di atas dengan bantuan pengkompil SASS. Untuk melihat perubahan dalam dokumen, pastikan anda menambah kod berikut di antara elemen