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 −
讓我們現在詳細了解上述方法，透過程式碼範例來連結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.
Sass –-watch common_file_name.scss final_output_file_name.scss
讓我們透過程式碼範例詳細討論上述方法的實作方式 - 步驟
Step 1 − In this step, we will create multiple SASS file with .scss extension
第二步 - 現在，我們將建立一個包含在上一個步驟中建立的所有SASS檔案的@import語句的SASS檔案。
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>
注意 - 請確保您的系統中已經預先安裝了SASS，以實現上述程式碼範例。 透過使用@use和局部檔案
Explanation
的中文翻譯為：File 1 − File 1 will be a SASS file that contains the functions, mixins and simple CSS styles defined with a underscore as prefix.
#_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文件的所有樣式的最終版本。
Run below command −
sass –-watch common.scss final.css
/* combined code from both files */
div{
color: #fff;
padding: 15px;
}
以上是SASS 中的文件分割的詳細內容。更多資訊請關注PHP中文網其他相關文章！
