数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法律研究SASS 中的文件分割
SASS 是一种 CSS 预处理器，代表 Syntactically Awesome Style Sheet（语法优美的样式表）。SASS 代码的编写方式类似于 JavaScript 等脚本语言，但在编译时会转换为 CSS，并在浏览器中作为 CSS 编译。SASS 可以与任何版本的 CSS 一起使用。它用于增强和改进在普通 CSS 中编写代码的方式。
在正常的开发工作区中，我们习惯于将所有代码都写在单个文件中，这使得我们的代码对于其他开发人员来说难以阅读和理解。SASS 允许我们将文件分割，并将代码分成多个文件。
文件分割的过程包括将一个大型文件拆分成多个子文件，然后将它们彼此链接起来，这可以通过在 SASS 中使用以下方法轻松完成：
使用 @import 和部分文件
使用 @use 和部分文件
现在让我们详细了解以上方法，以便通过代码示例了解如何在 SASS 中将单个文件的多个子文件彼此链接起来。
使用 @import 和部分文件
在这种方法中，我们将像平时在 CSS 文件中一样编写样式。但是，将会有一个公共文件，其中包含所有其他文件的 @import 语句，以将其包含或链接在一起，并将所有这些文件中的代码包含在该文件中。
将所有子文件链接或包含到公共文件中后，您需要在所有 SASS 文件所在的同一文件夹中运行以下命令：
Sass –-watch common_file_name.scss final_output_file_name.scss
上述命令将把公共 SASS 文件的全部代码链接或包含到最终输出文件中，该文件将链接到 HTML 文档以设置页面的样式。
让我们通过代码示例详细讨论上述方法的实现：
步骤
步骤 1 - 在此步骤中，我们将创建多个具有 .scss 扩展名的 SASS 文件。
步骤 2 - 现在，我们将创建一个 SASS 文件，其中包含前一步创建的所有 SASS 文件的 @import 语句。
步骤 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 和部分文件
@use 嵌入样式的方法与 @import 方法几乎相同。您只需将文件名称前缀加上下划线，然后使用 @use 语句导入它们即可。它还允许我们访问 SASS 文件中定义的函数和混合宏。
说明
文件 1 - 文件 1 将是一个 SASS 文件，其中包含定义的函数、混合宏和简单的 CSS 样式，并在其名称前添加了下划线。
_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
final.css -
/* combined code from both files */
div{
color: #fff;
padding: 15px;
}
通过这种方式，您可以通过拆分文件并使用最终输出的 CSS 文件向 HTML 文档添加样式来实现 SASS。
在本文中，我们学习了两种不同的方法，将拆分的 SASS 文件链接或嵌入到一个文件中，然后使用最终的 CSS 文件向我们的 HTML 页面添加样式。
303 次查看
