如何摆脱Sass依赖，用纯CSS替代@import语句？

在Sass中，@import语句用于导入其他Sass文件，以便在编译时将它们合并为一个CSS文件。如果你想摆脱Sass依赖并使用纯CSS来替代@import语句，可以考虑以下几种方法：

1. 使用CSS原生的@import

CSS本身也支持@import语句，可以用来导入其他CSS文件。不过，CSS的@import与Sass的@import有一些不同之处：

• 性能问题：CSS的@import会在浏览器解析CSS时发起额外的HTTP请求，这可能会影响页面加载性能。
• 顺序问题：CSS的@import必须出现在CSS文件的最前面，不能嵌套在其他规则中。

/* main.css */
@import url('reset.css');
@import url('typography.css');
@import url('layout.css');

2. 手动合并CSS文件

你可以手动将多个CSS文件合并为一个文件，这样可以避免使用@import语句。这种方法的好处是减少了HTTP请求，提高了页面加载性能。

# 使用命令行工具合并CSS文件
cat reset.css typography.css layout.css > main.css

3. 使用构建工具自动合并CSS文件

如果你不想手动合并文件，可以使用构建工具（如Webpack、Gulp、Parcel等）来自动合并和优化CSS文件。

使用Webpack

在Webpack中，你可以使用style-loader和css-loader来处理CSS文件，并通过mini-css-extract-plugin将CSS提取到一个单独的文件中。

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'main.css',
    }),
  ],
};

使用Gulp

在Gulp中，你可以使用gulp-concat插件来合并CSS文件。

// gulpfile.js
const gulp = require('gulp');
const concat = require('gulp-concat');

gulp.task('css', function() {
  return gulp.src(['reset.css', 'typography.css', 'layout.css'])
    .pipe(concat('main.css'))
    .pipe(gulp.dest('dist/css'));
});

4. 使用CSS变量和自定义属性

如果你在Sass中使用变量和混合（mixin），可以考虑使用CSS变量和自定义属性来替代。

/* 定义CSS变量 */
:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
}

/* 使用CSS变量 */
body {
  background-color: var(--primary-color);
  color: var(--secondary-color);
}

5. 使用CSS预处理器替代方案

如果你仍然需要一些Sass的功能（如嵌套、混合等），但不想使用Sass，可以考虑使用其他CSS预处理器，如Less或Stylus，它们也提供了类似的功能。

总结

摆脱Sass依赖并替代@import语句有多种方法，具体选择取决于你的项目需求和工作流程。如果你追求性能，手动合并或使用构建工具自动合并CSS文件是较好的选择。如果你需要一些Sass的功能，可以考虑使用CSS变量或切换到其他CSS预处理器。