NetBeans中的CSS预处理器

NetBeans中的CSS预处理器

本文介绍了NetBeans中的CSS预处理器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

假设我在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预处理器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-29 07:34