1. 创建Sass文件: 首先,创建一个以.scss或.sass为扩展名的Sass文件。比如,你可以创建一个文件名为 styles.scss。
2. 导入原生CSS: 在Sass文件中,你可以使用@import指令来导入原生的CSS文件。例如:
// styles.scss
// 导入原生CSS文件
@import 'path/to/your/native.css';
// 其他Sass样式
body {
background-color: #f0f0f0;
}
// 更多样式...
上面的例子中,path/to/your/native.css是你原生CSS文件的路径,根据实际情况修改路径。
3. 编译Sass: 保存Sass文件后,你需要将其编译成普通的CSS文件。你可以使用Sass的命令行工具或者一些构建工具(如Webpack、Gulp)来进行编译。
如果你使用命令行工具,可以运行如下命令:
sass input.scss output.css
这会将input.scss编译为output.css。
4. 在HTML中引入生成的CSS文件: 最后,将生成的CSS文件引入到你的HTML文件中。
<!-- 在HTML文件中引入生成的CSS文件 -->
<link rel="stylesheet" href="path/to/your/output.css">
确保路径与你的项目结构和文件位置一致。
这样,你就成功地将原生的CSS导入到Sass文件中,并通过编译生成了最终的CSS文件,可以在项目中使用了。
转载请注明出处:http://www.zyzy.cn/article/detail/6176/SASS