NetBeans中的CSS预处理器 [英] CSS pre-processors in NetBeans

问题描述

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

Let's say I have this HTML5 project on NetBeans 7.4

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

我想要以这样的方式配置NetBeans，当我保存 file1.scss ， file2.scss 和 file3.scss 中的任何一个时，它将所有这些文件编译为 style.css ，最好缩小为...

I want to configure NetBeans in such way that, when I save any of file1.scss, file2.scss and file3.scss, it compiles all these files into style.css, preferably minified...

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

Is it possible? If so, what should I write in project properties (see image)?

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

推荐答案

我通常有一个main.scss文件，该文件将导入所有其他经过预处理的css文件.实际上，这并不会将所有内容都放在一个文件中，而是允许您仅在标头中包含一个文件.

I usually have a main.scss file, which I import all other css files which get preprocessed. This doesn't actually put everything in one file, but it allows you to only include just one file in the header.

/*  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";

然后从我的html头开始，我包含main.css文件，其中包含我需要的所有内容.

Then from my html head, I include the main.css file, which contains everything I need.

<!-- CSS -->
<link rel="stylesheet" href="css/main/main.css">

至于最小化首选项，这是预处理程序设置的一部分.通常，从命令行进行设置时，watch命令将具有如下样式标记，该样式标记可最小化css:

As for the minified preference, this is part of the preprocessors setup. Usually when setting this up from commandline, the watch command will have a style flag like so which minifies the css:

sass --watch style.scss:style.css --style compressed

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

In your image, there is a field called Compiler Options, this field should be used to add any flags to your preprocessor, example, in your case, you would add --style compressed to this field.

示例:

将--style compressed用于最小的CSS输出.也可以使用--style compact& --style expanded.

Use --style compressed for minified css output. Also available are --style compact & --style expanded.

我希望这会有所帮助.

这篇关于NetBeans中的CSS预处理器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！