极客笔记SASS文件分割
SASS 是一种CSS预处理器，代表着 超级样式表 。SASS代码的编写方式与JavaScript等脚本语言非常相似，但在编译时会将其转换为CSS，并在浏览器中编译为CSS。SASS可以与任何版本的CSS一起使用，它用于改进和提升普通CSS代码的编写方式。
通常，在工作空间中，我们习惯将整个代码写在一个单独的文件中，这使得对于其他开发人员来说，我们的代码难以理解和阅读。SASS允许我们将文件分割成多个子文件。
文件分割的过程包括将一个大文件拆分为多个子文件，并相互链接起来。可以通过使用SASS中的以下方法轻松实现：
- 通过使用@import和partials
-
通过使用@use和partials
现在让我们详细了解上述方法，通过代码示例在SASS中将单个文件的多个子文件链接在一起。
通过使用@import和partials
在这种方法中，我们将按照通常在CSS文件中的方式编写样式。但是会有一个通用文件，其中包含 @import 语句来包含或链接其他文件，并将所有这些文件的代码放在该文件中。
在所有子文件都链接或包含到通用文件之后，您需要在同一个包含所有SASS文件的文件夹中运行以下命令：
Sass –-watch common_file_name.scss final_output_file_name.scss
上述命令将整个公共SASS文件的代码链接或包含到最终的输出文件中，该文件将链接到HTML文档以为页面进行样式设置。
让我们通过代码示例详细讨论上述方法的实施步骤：
步骤
- 步骤1 - 在这一步中，我们将创建多个扩展名为.scss的SASS文件。
-
步骤2 - 现在，我们将创建一个包含导入语句的SASS文件，该语句导入之前步骤中创建的所有SASS文件。
-
步骤3 - 在最后一步中，我们将使用上述命令将公共文件包含或链接到最终的CSS文件中，然后将其与HTML文档链接。
说明
-
文件1 - 让我们创建一个名为test.scss的文件，并将一些SASS代码放入该文件中。
test.css –
div{
color: #fff;
background: #444;
margin: 15px;
}
- 文件 2 − 现在，创建一个名为 common.scss 的文件。这个文件将使用@import语句链接所有子文件。
common.scss −
@import "test.scss";
div{
font-size: 22px;
font-weight: bold;
padding: 15px;
}
- 文件3 − 这将是我们最终的文件final.css，其中包含所有的SASS代码，并将链接到HTML文档。
运行下面的命令 −
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;
}
现在，我们可以将 final.css 文件与HTML文档链接，以便使用所有SASS文件的CSS样式对页面进行样式设置，如下面的示例所示。
示例
下面的示例将向你展示如何创建和链接多个SASS文件，并对页面进行样式设置。
<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>
在上面的示例中，我们使用了最终的final.css文件来为文档添加所有SASS文件的样式。
注意 − 请确保在您的系统中预先安装了SASS，以实现以上代码示例。
使用@use和Partials
使用@use方法嵌入样式与使用@import方法几乎相同。您只需要在文件名前加下划线，并使用@use语句导入它们。这还可以允许我们访问在SASS文件中定义的函数和混合。
解释
- 文件1 – 文件1是一个包含函数、混合和简单的CSS样式的SASS文件,名字加了下划线前缀.
test.scss-
@function my_space(){
padding: "15px";
returnpadding;
}
- 文件2 – 这将是一个通用文件，使用@use语句将所有的SASS文件链接在一起。
common.scss – -
@use "test";
div{
color: #fff;
padding: test.my_space();
}
- 文件3 – 这个文件是最终的CSS文件，它是来自所有SASS文件的样式的最终版本。
运行下面的命令 –
sass –-watch common.scss final.css
final.css –
/* combine来自这些文件的代码 */
div{
color: #fff;
padding: 15px;
}
通过将文件拆分并将样式添加到HTML文档中，可以实现此方法来实现SASS并生成最终的CSS文件。
在本文中，我们学习了两种将分割的SASS文件链接或嵌入到一个单独的文件中，并使用该最终的CSS文件为HTML页面添加样式的不同方式。