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 id="This-is-Heading-of-First-Div">This is Heading of First Div.</h2>
</div>
<div>
<h2 id="This-is-Heading-of-Second-Div">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 中的文件分割的详细内容。更多信息请关注PHP中文网其他相关文章！
光标的下一个CSS样式Apr 23, 2025 am 11:04 AM具有CSS的自定义光标很棒，但是我们可以将JavaScript提升到一个新的水平。使用JavaScript，我们可以在光标状态之间过渡，将动态文本放置在光标中，应用复杂的动画并应用过滤器。
世界碰撞：使用样式查询的钥匙帧碰撞检测Apr 23, 2025 am 10:42 AM互动CSS动画和元素相互启动的元素在2025年似乎更合理。虽然不需要在CSS中实施乒乓球，但CSS的灵活性和力量的增加，可以怀疑Lee＆Aver Lee＆Aver Lee有一天将是一场
使用CSS背景过滤器进行UI效果Apr 23, 2025 am 10:20 AM有关利用CSS背景滤波器属性来样式用户界面的提示和技巧。您将学习如何在多个元素之间进行背景过滤器，并将它们与其他CSS图形效果集成在一起以创建精心设计的设计。
微笑吗？Apr 23, 2025 am 09:57 AM好吧，事实证明，SVG的内置动画功能从未按计划进行弃用。当然，CSS和JavaScript具有承载负载的能力，但是很高兴知道Smil并没有像以前那样死在水中
'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM是的，让＃039;跳上文字包装：Safari Technology Preview In Pretty Landing！但是请注意，它与在铬浏览器中的工作方式不同。
CSS-tricks编年史XLIIIApr 23, 2025 am 09:35 AM此CSS-tricks更新了，重点介绍了年鉴，最近的播客出现，新的CSS计数器指南以及增加了几位新作者，这些新作者贡献了有价值的内容。
tailwind的@Apply功能比听起来更好Apr 23, 2025 am 09:23 AM在大多数情况下，人们展示了@Apply的@Apply功能，其中包括Tailwind的单个property实用程序之一（会改变单个CSS声明）。当以这种方式展示时，@Apply听起来似乎很有希望。如此明显
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具，用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。
禅工作室 13.0.1
功能强大的PHP集成开发环境
ZendStudio 13.5.1 Mac
功能强大的PHP集成开发环境
SublimeText3汉化版
中文版，非常好用
Atom编辑器mac版下载
最流行的的开源编辑器
