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 中的文件分割的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » SASS 中的文件分割
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
