SASS 中的文件分割

百变鹏仔 3个月前 (09-20) #CSS

文章标签文件分割

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

在正常的工作空间中，我们习惯于将整个代码写在一个单独的文件中，这使得我们的代码对其他开发人员来说难以阅读和理解。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 @import statement for all the other files to include or link them together 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;}

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方法几乎相似。您只需要在文件名前面加上下划线作为前缀，并使用@use语句导入它们。这还将允许我们访问在SASS文件中定义的函数和混合。

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

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 中的文件分割

通过使用@import和部分文件

步骤

Explanation

解释

Example

通过使用@use和局部文件

Explanation

解释

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写