Sass的文件和文件夹监听

Sass的单文件监听

sass --watch common.scss:a.css //对当前文件夹下common.scss监听,并自动编译生成a.css

Brave:~ Brave$ cd /Users/Brave/WebstormProjects/Sass/3\,文件和文件夹监听/style
Brave:style Brave$ sass --watch common.scss:a.css //对当前文件夹下common.scss监听,并自动编译生成a.css
>>> Sass is watching for changes. Press Ctrl-C to stop.
write a.css
write a.css.map
[Listen warning]:
Listen will be polling for changes. Learn more at https://github.com/guard/listen#polling-fallback.[/code] 
2,当.scss文件变化时会自动编译并生成.css文件



3,当common.scss变化时,会更新a.css文件,同时命令行输出提示:

>>> Change detected to: common.scss
write a.css
write a.css.map


4,关闭监听

ctrl+c关闭监听


Sass的文件夹监听
1,控制台进入sass文件夹所在路径,输入以下命令:

输入命令: sass --watch sass文件夹名:css文件夹名  eg: sass --watch style:css


完整执行如下:

Brave:3,文件和文件夹监听 Brave$ sass --watch style:css
>>> Sass is watching for changes. Press Ctrl-C to stop.
directory css
write css/common.css
write css/common.css.map
[Listen warning]:
Listen will be polling for changes. Learn more at https://github.com/guard/listen#polling-fallback.[/code] 
2,当sass文件夹下任意文件发生变化时,会自动监听并编译生成css文件



3,当.scss文件夹中的文件发生变化时,会更新.css文件,同时命令行输出提示:

>>> Change detected to: style/common.scss
write css/common.css
write css/common.css.map


WebStrom内置的sass监听
在WebStrom中内置了对Sass的监听编译配置,具体配置如下:



主要配置项:



Arguments:

--no-cache --update --watch $FileName$:$FileParentDir$/css/$FileNameWithoutExtension$.css


$FileParentDir$表示的是scss文件所在的文件夹的父级文件夹


项目目录的查找方式:

　　


OutPut paths to refresh:

$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map


配置后,sass文件将实现自动编译,当发生修改时Log输出如下:



以上文件夹只用于测试sass,正式环境中应更加规范

一般地,sass文件在一个文件夹,生成.css文件在另外一个文件夹,项目中引入生成的.css文件夹即可

修改记录:
20170204:
添加WebStrom配置Sass自动编译内容