首頁 > 文章 > web前端 > SASS 中的文件分割

SASS 中的文件分割

PHPz轉載: 2023-09-01 14:29:02843瀏覽

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 −

#透過使用 @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

@import

statement 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

讓我們透過程式碼範例詳細討論上述方法的實作方式 - 步驟
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;
}

File 2

− 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 −

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.css

file 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

Explanation
的中文翻譯為：

#_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

/* combined code from both files */
div{
   color: #fff;
   padding: 15px;
}

###In this way you can implement the SASS by splitting the files and add styles to the HTML document with a final outputting CSS file.### ###在本文中，我們學習了兩種將拆分的SASS檔案連結或嵌入到一個單獨檔案中，並使用該最終的CSS檔案為我們的HTML頁面新增樣式的方法。 ### ######

以上是SASS 中的文件分割的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript css scss html sass for include using this

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用CSS延遲過渡效果下一篇：如何使用CSS延遲過渡效果

看更多