如何将Sass编译成CSS

本节我们来学习 Sass 的编译,我们写好的 Sass 代码,浏览器是不能识别的,Sass 只不过是作为一个预处理工具,只有将 Sass 代码编译成 CSS 代码后,才能够使用。那么 Sass 要如何编译成 CSS 代码呢,这就是我们本节需要讲到的内容。

Sass 的编译方法有很多,例如:

  • 命令行编译模式:比较简单,可以直接在终端中输入 Sass 指令来编译,本节我们主要讲命令行编译模式的使用。
  • GUI工具编译:有的比较多的看一工具有 Koala、CodeKit、Scout、Compass.app 等,这些工具都需要安装。
  • 自动化编译:可以使用 Grunt 或者 Gulp 来配置 Sass 自动化编译。
命令编译

命令编译就是在终端中输入 sass 命令来编译 Sass 代码,这种编译方式使用起来很简单。

示例:

假设现在有一个Sass文件,文件名为 style.scss (Sass 文件的扩展名名 .scss),我们需要将这个文件中的代码编译成 CSS 代码,可以执行如下命令:

sass style.scss style.css

命令执行成功后,会自动创建一个 style.css 文件。但是这样有一个问题,就是每次更改了 style.scss 文件中的内容,都需要执行一次编译命令,就会很麻烦。

如果要解决上述问题,可以使用监听命令 --watch ,例如:

sass --watch style.scss:style.css

效果如下图所示:

这样一旦我们修改了 style.scss 文件,只要重新保存,就会将修改内容自动编译到 style.css 文件中。

如果项目中有很多的 sass 文件,可以监听整个目录:

sass --watch app/sass
  • 2
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值