資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學為什麼在 SCSS 檔名前加“_”？
SCSS 允許開發者以更結構化的方式編寫 CSS。此外，使用 SCSS 時，我們可以為 CSS 建立多個檔案，並在主 SCSS 檔案中匯入所需檔案。
在本教程中，我們將瞭解在 SCSS 檔名前新增“_”的目的。
什麼時候應該在 SCSS 檔名前新增“_”？
當我們在 SCSS 檔名前新增“_”時，編譯器在編譯 SCSS 時會忽略該檔案。如果檔名以“_”字元開頭，則該檔案將成為區域性檔案。
例如，我們有兩個名為“style.scss”和“_partial.scss”的檔案。編譯器只編譯 style.scss 檔案，而忽略 _partial.scss 檔案。但是，如果我們需要使用 _partial.scss 檔案的 CSS，我們可以在 style.scss 檔案中匯入它。
示例
下面的示例演示瞭如何在 HTML 中使用 SCSS。
檔名 – demo.html
我們使用``標籤在下面的檔案中添加了一個“style.css”檔案，該檔案是由 SCSS 編譯器生成的。在輸出中，使用者可以看到 CSS 應用於 div 元素的文字，文字變成了斜體。
<html> <head> <link rel = "stylesheet" href = "style.css"> </head> <body> <h2> Using the <i> SCSS </i> with HTML. </h2> <div> This is a div element. </div> </body> </html>
檔名 – style.scss
在下面的檔案中，我們建立了變數來儲存字型大小和樣式。然後，我們使用這些變數來設定 div 元素的樣式。
$font-size : 20px;
$font-style: italic;
div {
font-size: $font-size;
font-style: $font-style;
}
檔名 – style.css
每當我們編譯 style.scss 檔案時，它都會生成下面的程式碼，該程式碼由 html 檔案使用。
div {
font-size: 20px;
font-style: italic;
}
示例
<html>
<head>
<style>
/* compiled scss code */
div {
font-size: 20px;
font-style: italic;
}
</style>
</head>
<body>
<h2> Using the <i> SCSS </i> with HTML. </h2>
<div> This is a div element. </div>
</body>
</html>
示例
在這個例子中，我們演示瞭如何在檔名之前新增“_”，以及如何在主 css 檔案中使用它的 CSS。
檔名 – demo.html
下面的檔案包含簡單的 HTML 程式碼，並在`
`標籤中包含了“style.css”檔案。<html> <head> <link rel = "stylesheet" href = "style.css"> </head> <body> <h2> Using the <i> SCSS from the _partial.css file </i> with HTML.</h2> <div> Content of the div element. </div> </body> </html>
檔名 - _partial.scss
使用者需要建立一個檔名以“_”開頭的 _partial.scss 檔案。然後，使用者需要在檔案中新增以下程式碼。當我們編譯 SCSS 程式碼時，編譯器將忽略此檔案中的程式碼。
$text-color: blue; $border-width: 2px; $border-style: solid; $border-color: green;
檔名 – style.scss
現在，使用者需要將以下程式碼新增到 style.scss 檔案中，這是主 css 檔案。在下面的程式碼中，我們從“_partial.scss”檔案匯入了 css。透過這種方式，我們可以使用區域性檔案的程式碼。
@import "partial"
div {
color: $text-color;
border: $border-width $border-style $border-color;
}
檔名 – style.css
每當我們編譯 style.scss 檔案時，它都會自動生成 style.css 檔案。
div {
color: blue;
border: 2px solid green;
}
示例
<html>
<head>
<style>
/* compiled SCSS code from the _partial.css file */
div {
color: blue;
border: 2px solid green;
}
</style>
</head>
<body>
<h2> Using the <i> SCSS from the _partial.css file </i> with HTML.</h2>
<div> Content of the div element. </div>
</body>
</html>
在 SCSS 檔名前插入“_”的主要目的是使檔案成為區域性檔案，以便編譯器可以忽略該檔案。每當我們需要使用區域性檔案的 CSS 時，我們都可以將其匯入主檔案。
使用區域性檔案的主要好處是，我們不需要編寫重複的程式碼，使程式碼更清晰。例如，我們可以為不同部分的 CSS 新增不同的區域性檔案，並在需要時使用它們。
578 次瀏覽
