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 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.
文件 2 − 这将是一个常见的文件，使用 @use 语句将所有的 SASS 文件链接在一起。
文件3 − 这个文件是最终的CSS文件，它是来自所有SASS文件的所有样式的最终版本。
_test.scss −
@function my_space(){
$padding: "15px";
return $padding;
}
common.scss −
@use "test";
div{
color: #fff;
padding: test.my_space();
}
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 中的文件分割的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
为什么Flex布局中的紫色斜线区域会被误认为是'溢出空间”？
Apr 05, 2025 pm 05:51 PM
关于Flex布局中紫色斜线区域的疑问在使用Flex布局时，你可能会遇到一些令人困惑的现象，比如在开发者工具（d...
