当你使用Sass时,你也可以导入原生的CSS文件。这在逐步迁移项目或者混合使用Sass和纯CSS的情况下非常有用。以下是一个简单的例子:

1. 创建Sass文件(例如styles.scss):
    // styles.scss

    // 导入原生的CSS文件
    @import 'path/to/your/regular.css';

    // 其他Sass样式
    body {
        font-family: 'Arial', sans-serif;
        background-color: #f0f0f0;
    }

    // 更多样式...

2. 创建原生CSS文件(例如regular.css):
    /* regular.css */

    /* 你的纯CSS样式 */
    h1 {
        color: #333;
    }

    /* 更多样式... */

3. 编译Sass文件:
    运行Sass编译器将Sass文件编译成纯CSS文件。你可以使用命令行工具或者构建工具,如Webpack、Gulp等。以下是一个简单的命令行示例:
    sass styles.scss output.css

    这将把styles.scss编译成output.css。

4. 在HTML中引入生成的CSS文件:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="output.css">
        <title>Your Page Title</title>
    </head>
    <body>
        <!-- Your HTML content -->
    </body>
    </html>

通过这种方式,你可以在Sass中导入原生的CSS文件,使得在项目中逐渐迁移到Sass的同时,仍然能够使用现有的纯CSS文件。


转载请注明出处:http://www.zyzy.cn/article/detail/4333/sass