1. SASS简介
SASS是一种CSS预编译器，它允许开发者使用完全兼容CSS3的语法来写CSS，并在编译时将代码转换为兼容CSS2.1的CSS代码。SASS能够减轻前端开发工作，并提高了CSS在开发过程中的可维护性。
SASS的主要特点：
支持变量、函数和混合（mixins）
支持循环和控制语句
支持继承
支持模块化开发
由于SASS的这些特点，SASS在前端开发中越来越受欢迎。
2. SASS的文件分割
当CSS文件变得越来越大和复杂时，我们可能需要将CSS代码拆分成多个文件，以提高代码的可维护性和降低代码的复杂性。SASS提供了多种方式来组织你的CSS代码，其中一个常用的方式是文件分割。
2.1 Partials
SASS使用Partials来实现文件分割。Partials是用来包含和导入SASS代码片段的文件，这些文件的文件名以下划线开头。比如，一个名为“_variables.scss”的Partial文件只包含样式变量的定义:
// _variables.scss
$primary-color: #0073bf;
$secondary-color: #6b6e75;
为什么要使用下划线呢？因为SASS会忽略部分文件的编译，这些部分文件通常是一些变量、函数或混合器等代码片段，而不是整个样式表。这样做的原因是避免这些代码重复出现在编译后的CSS中。
2.2 @import导入Partial文件
可以使用@import指令将Partial文件导入到其他SASS或SCSS文件中。例如，为了在样式表中使用上面定义的变量，你可以在样式表中导入_variables.scss文件：
// style.scss
@import 'variables';
body {
background-color: $primary-color;
color: $secondary-color;
}
样式表中的主要样式现在可以使用在variables部分定义的颜色变量。
2.3 @import扩展名省略
当引用Partial文件时，你可以省略文件扩展名。因为SASS会自动寻找.mscss、.sass以及.scss等文件扩展名。
// style.scss
@import 'variables';
body {
background-color: $primary-color;
color: $secondary-color;
}
2.4 合并成一个编译后的CSS文件
你可以将多个SASS或SCSS文件合并成一个编译后的CSS文件。只需要在命令行中指定.scss文件，并通过将多个文件路径连接在一起来指定要编译的文件。编译后的CSS文件将包含所有导入的Partial文件中的代码。
sass style.scss:style.css
2.5 目录导入
你可以使用@import指令将整个目录导入到你的SASS文件中。在这种情况下，SASS会自动在该目录中查找名为_styles.scss的Partial文件，并将其作为该目录的entry point。
// style.scss
@import 'common';
body {
background-color: $color-primary;
color: $color-secondary;
}
注意，SASS会自动在common目录中查找名为_styles.scss的Partial文件，并将其作为该目录的entry point。
3. 总结
使用SASS的文件分割技术，可以使得你的CSS代码更加有组织化，更易于维护和管理。随着项目规模和复杂性的增加，文件分割技术将变得更为重要。通过使用SASS提供的Partials和@import指令，你可以将样式表拆分成多个文件，并在编译时自动合并这些文件。