在Sass中，@import语句用于将其他Sass文件的内容导入到当前文件中。如果你希望摆脱对Sass的依赖，可以使用纯CSS的@import语句来实现类似的功能。不过，需要注意的是，CSS的@import与Sass的@import在功能和性能上有一些区别。
@importCSS本身也支持@import语句，可以用来导入其他CSS文件。你可以将Sass文件转换为CSS文件，然后使用CSS的@import来导入这些文件。
/* main.css */
@import url('reset.css');
@import url('typography.css');
@import url('layout.css');
<link>标签另一种更高效的方式是直接在HTML文件中使用<link>标签来引入多个CSS文件。这种方式比CSS的@import更推荐，因为它在加载性能上更优。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="typography.css">
<link rel="stylesheet" href="layout.css">
</head>
<body>
<!-- Your content here -->
</body>
</html>
如果你在Sass中使用了变量，可以考虑使用CSS变量（Custom Properties）来替代。CSS变量在现代浏览器中得到了广泛支持。
/* variables.css */
:root {
--primary-color: #3498db;
--secondary-color: #2ecc71;
}
/* main.css */
@import url('variables.css');
body {
background-color: var(--primary-color);
color: var(--secondary-color);
}
如果你仍然需要一些Sass的功能（如嵌套、混合等），可以考虑使用PostCSS及其插件来实现类似的功能。PostCSS是一个强大的工具，可以通过插件扩展CSS的功能。
npm install postcss postcss-import postcss-nested --save-dev
然后配置PostCSS：
// postcss.config.js
module.exports = {
plugins: [
require('postcss-import'),
require('postcss-nested')
]
}
在CSS文件中使用：
/* main.css */
@import 'reset.css';
@import 'typography.css';
body {
background-color: #fff;
.container {
max-width: 1200px;
margin: 0 auto;
}
}
@import：可以直接使用，但性能不如<link>标签。<link>标签：推荐使用，性能更好。通过这些方法，你可以逐步摆脱对Sass的依赖，转而使用纯CSS或现代CSS工具链来管理样式。