Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan pembolehubah tidak sama dengan sebarang nilai dalam SASS?
Bagaimana untuk menetapkan pembolehubah tidak sama dengan sebarang nilai dalam SASS?
- 王林ke hadapan
- 2023-08-31 09:01:071079semak imbas
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.
Prasyarat
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.
Cara berbeza untuk menetapkan pembolehubah agar tidak sama dengan apa-apa dalam SASS
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.
Kaedah 1: Gunakan kata kunci Null
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.
tatabahasa
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;
Contoh
Mari lihat contoh lengkap cara menetapkan pembolehubah kepada tiada menggunakan kata kunci nol.
KOD HTML
<!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>
kod SASS
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;
}
Kod CSS tersusun
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
body {
background-color: ;
color: ;
font-size: ;
}
Kaedah 2: Gunakan fungsi Unset
Cara lain untuk menetapkan pembolehubah kepada kosong dalam SASS ialah menggunakan fungsi tidak ditetapkan. Fungsi unset mengalih keluar pembolehubah daripada memori, dengan berkesan menetapkannya kepada null. Berikut ialah contoh cara untuk menetapkan pembolehubah kepada null menggunakan fungsi unset.
tatabahasa
$newVar: 15; $newVar: unset($newVar);
Dalam sintaks di atas, $newVar pertama kali diberikan nilai 15. Kemudian gunakan fungsi unset untuk mengalih keluar $newVar daripada memori, dengan berkesan menetapkannya kepada null.
Contoh
Mari lihat contoh lengkap cara menetapkan pembolehubah kepada Tiada menggunakan fungsi tidak ditetapkan.
KOD HTML
<!DOCTYPE html>
<html>
<head>
<title>Example to set the variable to equal nothing using unset function</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>
kod SASS
Di bawah ialah kod SASS di mana kami mengisytiharkan dua pembolehubah $newVar1 dan $newVar2 dengan nilai masing-masing sama dengan 15 dan 12. Kini, fungsi unset digunakan untuk mengalih keluar $newVar1 dan $newVar2 daripada memori, dengan berkesan menetapkannya kepada null.
$newVar1: 15;
$newVar1: 12;
$newVar1: unset($newVar1);
$newVar2: unset($newVar2);
h1 {
font-size: $newVar1;
}
p {
font-size: $newVar2;
}
Kod CSS tersusun
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
h1 {
font-size: ;
}
p {
font-size: ;
}
Kaedah 3: Gunakan #{} interpolasi
Sintaks interpolasi #{} dinilai pada masa penyusunan, jadi dalam CSS terkumpul, nilai $newVar yang terhasil akan menjadi rentetan kosong. Ini mungkin bukan tingkah laku yang diingini dalam sesetengah situasi, jadi gunakan teknik ini dengan berhati-hati apabila sesuai.
tatabahasa
$newVar: #{" "};
Dalam sintaks di atas, $newVar ditetapkan kepada rentetan kosong, yang dibuat menggunakan sintaks interpolasi #{} dengan ruang di dalamnya. Teknik ini berguna apabila anda perlu menetapkan pembolehubah kepada rentetan kosong dan bukannya nol.
Contoh
Mari kita lihat contoh menetapkan pembolehubah kepada Tiada menggunakan kaedah interpolasi.
KOD HTML
<!DOCTYPE html>
<html>
<head>
<title>Example to set the variable to equal nothing using Interpolation</title>
<style>
/* Add the CSS compiled code below */
</style>
</head>
<body>
<h1>Welcome to Tutorialspoint!</h1>
</body>
</html>
kod SASS
Di bawah ialah kod SASS di mana kami mengisytiharkan pembolehubah $newVar dan menetapkannya kepada rentetan kosong menggunakan sintaks interpolasi.
$newVar: #{" "};
body {
padding: $newVar;
margin: $newVar;
}
编译的 CSS 代码
下面是在 SASS 编译器的帮助下编译上述 SASS 代码后生成的编译代码。要查看文档中的更改，请确保在相应 HTML 文件中的
body {
padding: ;
margin: ;
}
结论
在本文中，我们了解了如何使用不同的方法在 SASS 中将变量设置为空，包括使用 null 关键字、unset 函数和 #{} 插值语法。详细介绍这些技术，它们在不同情况或项目需求中非常有用，在这些情况或项目需求中，我们需要创建一个占位符变量，稍后可以在应用程序中为其分配值。
在SASS中，声明变量更具可读性和可维护性，从而节省了开发人员的时间和精力。要使用 SASS，请确保在 IDE 中安装了 SASS 编译器，就像上面讨论的在 VS Code 中使用 SASS 的过程一样，我们需要将 SASS 文件正确导入到 HTML 文件中。
Atas ialah kandungan terperinci Bagaimana untuk menetapkan pembolehubah tidak sama dengan sebarang nilai dalam SASS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!