資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝學
法學如何在SASS中將變數設定為無值？
SASS，即“語法高效樣式表”（Syntactically Awesome Style Sheets），是一種非常流行的預處理器指令碼語言，開發人員使用它來增強CSS的功能。SASS允許開發人員使用變數、巢狀、mixin和其他一些CSS中沒有的高階功能。
使用SASS的關鍵功能之一是宣告變數的功能，變數不過是值的佔位符，我們可以在整個Web應用程式樣式表中重複使用它們。變數幫助開發人員節省時間和精力，使他們能夠透過使程式碼更易讀和更易於維護來一次更新多個值。
有時，我們可能希望將變數設定為無值，在其他語言中這意味著將變數設定為null或undefined。當我們想要建立一個佔位符變數，稍後在應用程式中為其賦值時，這非常有用。在本文中，我們將瞭解如何在SASS中將變數設定為無值。
先決條件
要在HTML中執行SASS，請確保已在IDE（如VS Code）中安裝SASS編譯器，使用以下命令下載並安裝SASS編譯器：
npm install -g sass
這將在您的系統上全域性安裝SASS編譯器。接下來，建立一個副檔名為.scss的新檔案，其中將包含我們的SASS程式碼。
之後，將SASS檔案匯入HTML檔案。在HTML檔案中，使用HTML檔案頭部部分中的“link”標籤新增指向SASS檔案的連結。該連結的rel屬性應設定為“stylesheet”，href屬性應設定為SASS檔案的路徑。
在SASS中將變數設定為無值的幾種方法
要將變數設定為無值，有多種方法，例如使用null關鍵字、unset函式或#{}插值方法。讓我們逐一詳細討論所有這些方法。
方法1：使用Null關鍵字
null關鍵字用於在SASS中表示值的缺失。當變數設定為null時，表示該變數沒有賦值。當您想要宣告一個變數但不想立即為其賦值時，這很有用。
語法
要在SASS中將變數設定為無值，只需使用null關鍵字，如下所示：
$newVar: null;
或者，我們可以透過將其賦值給已設定為null的變數來將變數設定為null
$newOtherVar: $newVar;
示例
讓我們來看一個完整的示例，瞭解如何使用null關鍵字將變數設定為無值。
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>
SASS程式碼
以下是SASS程式碼，我們聲明瞭變數$newVar，其值為null。
$newVar: null;
body {
background-color: $newVar;
color: $newVar;
font-size: $newVar;
}
編譯後的CSS程式碼
以下是使用SASS編譯器編譯上述SASS程式碼後生成的編譯程式碼。要檢視文件中的更改，請確保在相應的HTML檔案中的<style>元素之間新增以下程式碼。
body {
background-color: ;
color: ;
font-size: ;
}
方法2：使用Unset函式
在SASS中將變數設定為無值的另一種方法是使用unset函式。unset函式將變數從記憶體中移除，有效地將其設定為null。以下是如何使用unset函式將變數設定為null。
語法
$newVar: 15; $newVar: unset($newVar);
在上述語法中，$newVar首先被賦值為15。然後使用unset函式將$newVar從記憶體中移除，有效地將其設定為null。
示例
讓我們來看一個完整的示例，瞭解如何使用unset函式將變數設定為無值。
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>
SASS程式碼
以下是SASS程式碼，我們聲明瞭兩個變數$newVar1和$newVar2，其值分別為15和12。現在，unset函式用於將$newVar1和$newVar2從記憶體中移除，有效地將其設定為null。
$newVar1: 15;
$newVar1: 12;
$newVar1: unset($newVar1);
$newVar2: unset($newVar2);
h1 {
font-size: $newVar1;
}
p {
font-size: $newVar2;
}
編譯後的CSS程式碼
以下是使用SASS編譯器編譯上述SASS程式碼後生成的編譯程式碼。要檢視文件中的更改，請確保在相應的HTML檔案中的<style>元素之間新增以下程式碼。
h1 {
font-size: ;
}
p {
font-size: ;
}
方法3：使用#{}插值
#{}插值語法在編譯時進行計算，因此編譯後的CSS中$newVar的結果值將為空字串。在所有情況下，這可能不是理想的行為，因此務必謹慎使用此技術，並且僅在適當的時候使用。
語法
$newVar: #{" "};
在上述語法中，$newVar設定為一個空字串，該字串是使用#{}插值語法在其中包含單個空格建立的。此技術在需要將變數設定為空字串而不是null的情況下非常有用。
示例
讓我們來看一個使用插值方法將變數設定為無值的示例。
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>
SASS程式碼
以下是SASS程式碼，我們聲明瞭一個變數$newVar，使用插值語法將其設定為一個空字串。
$newVar: #{" "};
body {
padding: $newVar;
margin: $newVar;
}
編譯後的CSS程式碼
以下是使用SASS編譯器編譯上述SASS程式碼後生成的編譯程式碼。要檢視文件中的更改，請確保在相應的HTML檔案中的<style>元素之間新增以下程式碼。
body {
padding: ;
margin: ;
}
結論
在本文中，我們瞭解瞭如何在SASS中使用不同的方法將變數設定為無值，這些方法包括使用null關鍵字、unset函式和#{}插值語法。更詳細地介紹這些技術，它們在專案中不同的情況或需求下都非常有用，在這種情況下，我們需要建立一個佔位符變數，稍後在應用程式中為其賦值。
在SASS中，宣告變數更易於閱讀和維護，從而節省了開發人員的時間和精力。要使用SASS，請確保已在IDE中安裝SASS編譯器，如上所述，在VS Code中使用SASS的過程也已討論過，我們需要正確地將SASS檔案匯入HTML檔案。
487 次瀏覽
