sass编译方式

来源:互联网 发布:095型核潜艇 知乎 编辑:程序博客网 时间:2024/05/15 08:51

1.安装sass,ruby

2.安装compass,Bourbon(这两个为sass的比较好使的包,不一定要下载)

3.sass -v.,ruby -v,$ gem list 查看sass,ruby,compass,bourbon是否安装成功



4.创建一个目录,用来测试sass

第一种方式,输入命令sass sass/style.scss css/style.css    把sass目录下的style.sass编译到css目录下的style.css,但是这种方式是不能实时监控。

(使用sass转译.scss文件,有一个不足之处,就是我们修改了.scss文件,不会自动转译。这样一来,我们要时时查看转译出来的CSS样式就非常的蛋疼。那么有没有一个比较好的方法吗?有的,我们只需要在sass命令的基础上添加一个参数--watch就可以。)

第二种方式,输入命令sass --watch sass/style.css

(sass/style.scss转译到sass/style.css下,并没有转到css目录中,这是他不足的一处。转译出来的在不在css目录下,我想你并不会太在意(大不了到时copy一下),而关心的是,他是不是如前面所说的,可以时间监控转译.scss文件。为了验证这个功能是有效的,我们来修改一下style.scss文件:)


5.编译所有文件

虽然sass和sass --watch都达到我们转译.scss文件功能,但在实际项目中,我们的项目中不可能只存有一个.scss文件。所以我们需要一种方法,可以同时将多个.scss文件转译成.css文件。其实在SASS中,可以直接将整个目录中的所有.scss文件转译成所有的.css文件,并放到另一个CSS目录中,其命令如下所示:

$ sass --watch sass/:css

特别强调:如果使用sass --watch转译.scss样式,首先需要安装rb-fsevent,如果没有安装就执行sass --watch将无法执行时时监控.scss转译成.css。


推荐文章


0 0
原创粉丝点击