SASS 中的文件分割
SASS is a CSS pre-processor, that stands for Syntactically Awesome Style Sheet. The SASS code is written just like a scripting language like JavaScript, but at the time of compilation it is converted into CSS and compiled as CSS in the browser. SASS can be used with any version of CSS. It is used to enhance and advance the way of writing the code in normal.
##在正常的工作空間中，我們習慣將整個程式碼寫在一個單獨的檔案中，這使得我們的程式碼對其他開發人員來說難以閱讀和理解。 SASS允許我們將文件拆分並將程式碼分成多個文件。The process of splitting a file includes the breaking of a one big file into multiple sub files and then link them with each other, which can be easily done by using the below methods in SASS −
- ##By using @import and partials
#透過使用 @use 和 partials
讓我們現在詳細了解上述方法，透過程式碼範例來連結SASS中單一檔案的多個子檔案。
透過使用@import和部分檔案
In this method, we will write the styles as we normally writes in CSS files. But there will be a common file that contains the
@importstatement for all the other files to include or link them toge and get the code of all those files in that file.
After all the sub files are linked or included into the common file, you need to run the below command in the same folder where all SASS files exists −
Sass –-watch common_file_name.scss final_output_file_name.scss
- The above command will link or include the whole code of the common SASS file into the final output file that will be linked to the HTML document to style the page.
-
讓我們透過程式碼範例詳細討論上述方法的實作方式 - 步驟
Step 1 − In this step, we will create multiple SASS file with .scss extension
第二步 - 現在，我們將建立一個包含在上一個步驟中建立的所有SASS檔案的@import語句的SASS檔案。
- 在最後一步中，我們將使用上述命令將公共文件包含或連結到最終的CSS文件中，然後將其與HTML文件連結。
-
Explanation 的中文翻譯為：解釋
File 1 − let us create a file named test.scss and put some SASS code inside that file.
#test.css −#
div{ color: #fff; background: #444; margin: 15px; }登入後複製
− Now, create a file named common.scss. This file will link all the sub files using the @import statement.
-
common.scss −
@import "test.scss"; div{ font-size: 22px; font-weight: bold; padding: 15px; }登入後複製
檔案3 − 這將是我們的最終檔案final.css，其中包含所有的SASS程式碼，並且將連結到HTML文件。
Run below command −
sass –-watch common.scss 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;
}
Now, we can link the
final.cssfile with the HTML document to style the page with the CSS of all the SASS files as done in the below example.
Example The below example will you how you can create and link multiple SASS file together and style a page −
#<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>
In the above example, we have used the final final.css file to style the document with all the styles of SASS files.
注意 - 請確保您的系統中已經預先安裝了SASS，以實現上述程式碼範例。 透過使用@use和局部檔案
使用
@use方法嵌入樣式與
@import- 方法幾乎相似。您只需要在檔案名稱前面加上底線作為前綴，並使用@use語句匯入它們。這也將允許我們存取在SASS檔案中定義的函數和混合。
-
Explanation
的中文翻譯為： 解釋 #_test.scss −
@function my_space(){ $padding: "15px"; return $padding; }登入後複製-
common.scss −
@use "test"; div{ color: #fff; padding: test.my_space(); }登入後複製
File 1 − File 1 will be a SASS file that contains the functions, mixins and simple CSS styles defined with a underscore as prefix.
文件 2 − 這將會是一個常見的文件，使用 @use 語句將所有的 SASS 檔案連結在一起。
文件3 − 這個文件是最終的CSS文件，它是來自所有SASS文件的所有樣式的最終版本。
Run below command −
sass –-watch common.scss final.css
/* combined code from both files */
div{
color: #fff;
padding: 15px;
}
以上是SASS 中的文件分割的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
