关于Hbuilder的预编译处理器sass的设置

打开首选项,找到预编译选项,找到对应的sass,没有的话自行添加一个。点击后弹出弹窗,如下图所示:

其中,触发命令地址是通过ruby安装sass的对应安装位置地址。

这里主要讲命令参数,个人设置代码如下,同时也是个人喜欢的默认设置:

--no-cache %FileName% ../css/%FileBaseName%.css --style expanded

而Hbuilder的“智能完成”功能的设置为:

--no-cache %FileName% %FileBaseName%.css

产生的文件结构效果如下:

  Hbuilder的这种智能设置,css和sass文件是同一级别,同一个文件夹下。

其中 --style 后面有四种输出css格式:

嵌套:nested;

展开:expanded;

每句一行:compact;

压缩:compressed;

%FileBaseName%.css 表示写sass后生成的css文件,默认和sass同级,以此为起点写相对路径,比如上面说的个人喜欢的默认设置,产生的sass和css文件结构对应如下:

 即../css/%FileBaseName%.css,产生的css文件在sass文件的父层同级css文件夹下。

原文地址:https://www.cnblogs.com/Chansea/p/15433526.html