一个工具或 IDE 插件,用于利用 .less (Lean CSS) 文件的开发和 CSS 导出

软件推荐 视窗 Web开发 ide 较少的
2021-10-17 04:01:51

目前我正在使用没有 grunt 插件的 Node.js LESS (Lean CSS) 模块来生成 CSS 文件。我有一些 shell 脚本,可以对我手动运行的 CSS 导出进行较少的操作。关键是 LESS 文件是在 Xamarin / Visual Studio 中的一个更大的项目中开发的。我需要改进我的开发体验,同时将 LESS 文件保留为更大项目的子集,并且最好我希望在与整个项目相同的 IDE 中使用它们。

因此,我正在寻找一种支持在 Windows 操作系统上处理 LESS 文件的工具。我需要它具有以下功能:

  • 支持 LESS 构造的代码自动完成。理想情况下,它会识别导入的文件并将其定义包含在自动完成建议中
  • 支持 LESS 格式的语法高亮显示。
  • 能够通过菜单、按钮或其他简单方式将 LESS 文件导出为编译后的 CSS。换句话说 - 类似构建的行为。
  • 最好是免费工具(不是必需的)
  • 最好是独立的(不需要预先安装 npm 的 Node.js 或其他需要预先安装的 3rd 方软件)。对于 IDE 插件,如果 IDE 自带 node.js 或任何其他中间件,我是可以的,这一点的目的是避免手动管理先决条件。

或者,我也很欣赏以下 IDE 具有类似功能的 IDE 插件:

  • 视觉工作室 2010
  • Xamarin Studio (MonoDevelop)
  • Eclipse 或其风味
3个回答

如果您需要对 Visual Studio 2010 的 LESS 支持(在使用它开发 Web 项目时很有用),您可以使用加载项。Stack Overflow中已经讨论了一个候选解决方案

CssIsLess

此扩展带来了 Visual Studio 中已经针对 .css 文件而不是 .less 文件提供的内置语法突出显示和自动完成功能。实际上它只做这个,没有编译或其他不太具体的支持,但仍然是一些东西。

到目前为止,当结合我在问题中提到的其他既定实践时,我发现这足以在 Visual Studio 2010 中进行开发:

目前我正在使用没有 grunt 插件的 Node.js LESS (Lean CSS) 模块来生成 CSS 文件。我有一些 shell 脚本,可以对我手动运行的 CSS 导出进行较少的操作。

对上述内容的另一个转折是,我已经让我的 shell 脚本在项目构建之前执行。这需要对项目进行一些手动设置,这是一个小缺点,但 Visual Studio 项目设置对话框允许您轻松地将这一单行添加到任何项目中。结果是 .less 文件在项目构建(并可能部署)之前作为 css 编译到所需的位置,因此它已设置所有必需的文件。

如果有人感兴趣,这是我的配置:

  • 在 Visual Studio 中 Web 项目的属性中,转到该Build Events部分并将其放在 Pre-build 文本框中:

    $(ProjectDir)App_Less\export.$(ConfigurationName).bat &

    这种做法意味着我为自己建立了一些约定:

    • Web 项目有一个App_Less文件夹(我这样命名,您可以随意更改),其中包含一些 bat 文件。
    • 我为每个主题使用一个文件夹,每个这样的文件夹都包含一个theme.less引用所有其他较少文件的根文件。示例文件夹结构如下所示:
      {ApplicationRoot} App_Less Default// 默认主题 theme.less export.Debug.bat exprot.Release.bat

    目前,我正在使用 2 个 bat 文件,这取决于我是在本地构建(在 DEBUG 模式下)还是用于生产(在 RELEASE 模式下)。我需要它们驻留在已经提到的文件夹中App_Less脚本如下:

    导出.Debug.bat

    lessc %~dp0Default\theme.less > %~dp0..\Styles\Default.css

    出口.Release.bat

    lessc %~dp0Default\theme.less > %~dp0..\Styles\Default.css -x

    两个脚本都将在以下目录中输出 css:
    {ApplicationRoot} Styles Default.css 根据构建配置,该Debug模式将以“人类可读”模式呈现 css,因此我可以轻松地修复它的问题。Release模式将使 css 缩小,准备好用于生产。

  • 每次构建项目时,我都会自动将我的 less 文件编译为所需的 css 文件。

我在使用这种方法时也遇到了一些缺点。一个缺点是,Visual Studio 的默认 CSS 语法检查器无法识别的一些有效 CSS3 结构也会在 less 文件中加下划线。但是,除了在使用>令牌的地方外,它仅在 less 中可用的嵌套声明存在不可见的问题。

IntelliJ IDEA支持LESS

CSS

新的 Extract Inline CSS 重构有助于自动提取内联样式。

图像预览和提取图像重构可用于 data:uri 属性。

LESS、SASS 和 SCSS

面包屑和可抑制检查支持 LESS、Sass 和 SCSS 语言。

更多信息:

这是一个比我通常做的更少基于经验的建议,但无论如何</warning>。

我真的很喜欢SublimeText作为一个很棒的文本编辑器(我认为这是我用过的最好的,尽管我确信它可以很容易地转化为意见争论)。我没有使用 LESS - 我一直想尝试一下,但还没有开始。然而,尽管我确实为 ST 安装了一些较少关注的插件;其中两个或三个一起应该符合您的所有要求。这两个插件是:

  • Less2Css:直接从 SublimeText 构建较少的文件到 CSS。(有几个选项,包括在保存时自动执行)
  • LESS:语法高亮和一些自动完成。
  • CSS 扩展完成:支持 LESS 和 CSS。这是一个至高无上的自动完成选项;你可能会想要它。

要检查您的要求:

  • 支持 LESS 构造的代码自动完成。理想情况下,它会识别导入的文件并将它们的定义包含在自动完成建议中:CSS Extended Completions就是这样做的。
  • 支持 LESS 格式的语法高亮: LESS做到了。
  • 能够通过菜单、按钮或其他简单方式将 LESS 文件导出为编译后的 CSS。换句话说 - 类似构建的行为: Less2Css 做到了。
  • 最好是免费工具(不是必需的): 主要是所有三个插件都是免费的。Sublime 有免费的无限时间试用。
  • 最好是独立的(不需要预先安装 npm 的 Node.js 或其他需要预先安装的 3rd 方软件)。对于 IDE 插件,如果 IDE 自带 node.js 或任何其他中间件,我可以,这一点的目的是避免手动管理先决条件:除了Less2Css构建插件,没有任何外部请求。对于Less2Css插件,您只需要安装一个需求 (lesscs),并且在安装下的Less2Css页面上有说明。