首页技术文章正文

怎样将.scss文件编译成为.css文件?

更新时间:2021-05-12 来源:黑马程序员 浏览量:

1577370495235_学IT就到黑马程序员.gif

在完成了Sass代码的编写后,我们可以通过node-sass模块对.scss文件进行编译。下面主要讲解如何将.scss文件编译成为.css文件,具体如例4-1所示。

【例4-1】

(1)在C:\web\chapter04\Sass目录下创建color.scss文件,并将Sass语法格式中设置边框颜色的代码添加到color.scss文件中,具体代码如下。

$highlight-color: #F90;
.selected {
 border: 1px solid $highlight-color;
}

上述代码中,定义变量$highlight-color的值为#F90;设置类名为.selected的边框大小为1px实线,颜色为“#F90”。

在C:\web\chapter04\Sass命令下打开命令行,执行如下命令。

node-sass color.scss output.css

上述代码中,定义变量$highlight-color的值为#F90;设置类名为.selected的边框大小为1px实线,颜色为“#F90”。

在C:\web\chapter04\Sass命令下打开命令行,执行如下命令。

node-sass color.scss output.css

上述命令执行后,会在C:\web\chapter04\Sass目录中生成编译后的output.css文件,具体代码如下。

.selected {
 border: 1px solid #F90;
}

上述代码中,变量$highlight-color已成功被替换为了#F90,并且编译后的代码与基础CSS样式代码相同。

1620802886425_scss编译.jpg


猜你喜欢:

什么是字体图标?有什么优势?

jQuery的语法有什么特点?

如何下载和使用Normalize.css?【移动web页面开发】    

黑马程序员前端与移动开发培训

分享到:
在线咨询 我要报名
和我们在线交谈!