NetBeans中的CSS预处理器

Mik*_*ikO 1 netbeans sass netbeans-7 css-preprocessor

假设我在NetBeans 7.4上有这个HTML5项目

myproject <---project folder
  |
  |-- public_html <---web root (the only visible in Projects tab)
  |     |
  |     |-- css
  |           |-- style.css
  |
  |-- scss
        |-- file1.scss
        |-- file2.scss
        |-- more
              |-- file3.scss
Run Code Online (Sandbox Code Playgroud)

我想以这样的方式配置NetBeans,当我保存file1.scss,file2.scssfile3.scss中的任何一个时,它会将所有这些文件编译成style.css,最好是缩小...

可能吗?如果是这样,我应该在项目属性中写什么(见图)?

在此输入图像描述

注意:在NetBeans中正确安装和配置了SASS

Sha*_*ins 9

我通常有一个main.scss文件,我导入所有其他css文件进行预处理.这实际上并不是将所有内容都放在一个文件中,但它允许您只在标题中包含一个文件.

/*  Import Media Queries and Print Styles */

@import "base.css";
@import "device.css";
@import "print.css";
@import "site.css";
@import "mq.css";
@import "grid.css";
@import "utils.css";
Run Code Online (Sandbox Code Playgroud)

然后从我的html头,我包括main.css文件,其中包含我需要的一切.

<!-- CSS -->
<link rel="stylesheet" href="css/main/main.css">
Run Code Online (Sandbox Code Playgroud)

至于缩小的首选项,这是预处理器设置的一部分.通常在从命令行设置它时,watch命令将具有类似的样式标志,从而缩小了css:

sass --watch style.scss:style.css --style compressed
Run Code Online (Sandbox Code Playgroud)

在您的图像中,有一个名为的字段Compiler Options,该字段应该用于向您的预处理器添加任何标志,例如,在您的情况下,您将添加--style compressed到此字段.

例:

将编译器选项添加到此字段

使用--style compressed的精缩CSS输出.还有--style compact&--style expanded.

我希望这有帮助.