資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究SASS 中的檔案分割
SASS 是一種 CSS 預處理器，代表 Syntactically Awesome Style Sheet（語法優美的樣式表）。SASS 程式碼的編寫方式類似於 JavaScript 等指令碼語言，但在編譯時會轉換為 CSS，並在瀏覽器中作為 CSS 編譯。SASS 可以與任何版本的 CSS 一起使用。它用於增強和改進在普通 CSS 中編寫程式碼的方式。
在正常的開發工作區中，我們習慣於將所有程式碼都寫在單個檔案中，這使得我們的程式碼對於其他開發人員來說難以閱讀和理解。SASS 允許我們將檔案分割，並將程式碼分成多個檔案。
檔案分割的過程包括將一個大型檔案拆分成多個子檔案，然後將它們彼此連結起來，這可以透過在 SASS 中使用以下方法輕鬆完成：
使用 @import 和部分檔案
使用 @use 和部分檔案
現在讓我們詳細瞭解以上方法，以便透過程式碼示例瞭解如何在 SASS 中將單個檔案的多個子檔案彼此連結起來。
使用 @import 和部分檔案
在這種方法中，我們將像平時在 CSS 檔案中一樣編寫樣式。但是，將會有一個公共檔案，其中包含所有其他檔案的 @import 語句，以將其包含或連結在一起，並將所有這些檔案中的程式碼包含在該檔案中。
將所有子檔案連結或包含到公共檔案中後，您需要在所有 SASS 檔案所在的同一資料夾中執行以下命令：
Sass –-watch common_file_name.scss final_output_file_name.scss
上述命令將把公共 SASS 檔案的全部程式碼連結或包含到最終輸出檔案中，該檔案將連結到 HTML 文件以設定頁面的樣式。
讓我們透過程式碼示例詳細討論上述方法的實現：
步驟
步驟 1 - 在此步驟中，我們將建立多個具有 .scss 副檔名的 SASS 檔案。
步驟 2 - 現在，我們將建立一個 SASS 檔案，其中包含前一步建立的所有 SASS 檔案的 @import 語句。
步驟 3 - 在最後一步，我們將使用上述命令將公共檔案包含或連結到最終 CSS 檔案，然後將其連結到 HTML 文件。
說明
檔案 1 - 讓我們建立一個名為 test.scss 的檔案，並在其中放入一些 SASS 程式碼。
test.css -
div{
color: #fff;
background: #444;
margin: 15px;
}
檔案 2 - 現在，建立一個名為 common.scss 的檔案。此檔案將使用 @import 語句將所有子檔案連結在一起。
common.scss -
@import "test.scss";
div{
font-size: 22px;
font-weight: bold;
padding: 15px;
}
檔案 3 - 這將是我們的最終檔案 final.css，它將包含所有 SASS 程式碼，並將連結到 HTML 文件。
執行以下命令：
sass –-watch common.scss final.css
final.css -
final.css:
/* imported code from test.scss */
div{
color: #fff;
background: #444;
margin: 15px;
}
/* code from common.scss */
div{
font-size: 22px;
font-weight: bold;
padding: 15px;
}
現在，我們可以將 final.css 檔案連結到 HTML 文件，以使用所有 SASS 檔案的 CSS 設定頁面的樣式，如以下示例所示。
示例
以下示例將向您展示如何建立和連結多個 SASS 檔案，以及如何設定頁面的樣式：
<html>
<head>
<style>
/* imported code from test.scss */
div{
color: #fff;
background: #444;
margin: 15px;
}
/* code from common.scss */
div{
font-size: 22px;
font-weight: bold;
padding: 15px;
}
</style>
</head>
<body>
<div>
<h2>This is Heading of First Div.</h2>
</div>
<div>
<h2>This is Heading of Second Div.</h2>
</div>
</body>
</html>
在以上示例中，我們使用了最終的 final.css 檔案來使用所有 SASS 檔案的樣式設定文件的樣式。
注意 - 請確保您已安裝 SASS 預處理器，以便在您的系統中實現上述程式碼示例。
使用 @use 和部分檔案
@use 嵌入樣式的方法與 @import 方法幾乎相同。您只需將檔名稱字首加上下劃線，然後使用 @use 語句匯入它們即可。它還允許我們訪問 SASS 檔案中定義的函式和混合宏。
說明
檔案 1 - 檔案 1 將是一個 SASS 檔案，其中包含定義的函式、混合宏和簡單的 CSS 樣式，並在其名稱前添加了下劃線。
_test.scss -
@function my_space(){
$padding: "15px";
return $padding;
}
檔案 2 - 它將是一個公共檔案，使用 @use 語句將所有 SASS 檔案連結在一起。
common.scss -
@use "test";
div{
color: #fff;
padding: test.my_space();
}
檔案 3 - 此檔案是最終的 CSS 檔案，它是來自所有 SASS 檔案的所有樣式的最終版本。
執行以下命令：
sass –-watch common.scss final.css
final.css -
/* combined code from both files */
div{
color: #fff;
padding: 15px;
}
透過這種方式，您可以透過拆分檔案並使用最終輸出的 CSS 檔案向 HTML 文件新增樣式來實現 SASS。
在本文中，我們學習了兩種不同的方法，將拆分的 SASS 檔案連結或嵌入到一個檔案中，然後使用最終的 CSS 檔案向我們的 HTML 頁面新增樣式。
303 次檢視
