Sublime Text 的 CSS 格式化工具

描述

CSS Format 是为 Sublime Text 开发的 CSS 格式化插件，可以将 CSS/SASS/SCSS/LESS 代码转换为扩展、紧凑或压缩格式。CSS Format 只是一个格式化工具，不支持语法检查和自动纠错功能。

示例

• 扩展

  body {
      background: #fff;
      font: 12px/2em Arial, Helvetica, sans-serif;
  }
  ol, ul, li {
      margin: 0;
      padding: 0;
  }
  a {
      color: rgba(65, 131, 196, 0.8);
  }
  

• 扩展（断行选择器）

  body {
      background: #fff;
      font: 12px/2em Arial, Helvetica, sans-serif;
  }
  
  ol,
  ul,
  li {
      margin: 0;
      padding: 0;
  }
  
  a {
      color: rgba(65, 131, 196, 0.8);
  }
  

• 紧凑

  body { background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; }
  ol, ul, li { margin: 0; padding: 0; }
  a { color: rgba(65, 131, 196, 0.8); }
  

• 紧凑（无空格）

  body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif;}
  ol,ul,li{margin:0;padding:0;}
  a{color:rgba(65,131,196,0.8);}
  

• 紧凑（断行选择器）

  body { background: #fff; font: 12px/2em Arial, Helvetica, sans-serif; }
  ol,
  ul,
  li { margin: 0; padding: 0; }
  a { color: rgba(65, 131, 196, 0.8); }
  

• 紧凑（断行选择器，无空格）

  body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif;}
  ol,
  ul,
  li{margin:0;padding:0;}
  a{color:rgba(65,131,196,0.8);}
  

• 压缩

  body{background:#fff;font:12px/2em Arial,Helvetica,sans-serif}ol,ul,li{margin:0;padding:0}a{color:rgba(65,131,196,0.8)}
  

安装

选项 1 - 使用包控制（推荐）

安装此包最简单的方法是通过包控制。

1. 安装 包控制，按照网站上的说明操作。

2. 打开命令面板： Ctrl+Shift+P（Linux/Windows）或 Cmd+Shift+P（OS X）并选择 包控制：安装包。

3. 当出现包列表时，键入 CSS Format 并选择它。

选项 2 - 使用 Git

将存储库克隆到 Sublime Text 的“包”目录中

git clone git://github.com/mutian/Sublime-CSS-Format.git "CSS Format"

您可以在以下目录中找到“包”：

• OS X: ~/Library/Application Support/Sublime Text 2/Packages/

• Windows: %APPDATA%/Sublime Text 2/Packages/

• Linux: ~/.Sublime Text 2/Packages/

选项 3 - 不使用 Git

从 GitHub 下载最新的源代码 zip 文件，并将其解压缩到您的 Sublime Text “包”文件夹中的名为“CSS Format”的新文件夹中。

使用方法

选择代码，或将光标放在文档中，然后以下面的方式之一执行命令：

• 上下文菜单： CSS Format。

• 编辑菜单： 编辑 > CSS Format。

• 命令面板：打开命令面板： Ctrl+Shift+P（Linux/Windows）或 Cmd+Shift+P（OS X）并选择 格式化 CSS：XXX。

快捷键

默认情况下，CSS Format 不提供键盘快捷键以避免冲突，但您可以通过阅读包含的 Example.sublime-keymaps 文件来了解如何设置自己的快捷键。

配置

提供了多种配置选项以自定义保存时的行为。有关可用选项的最新信息，请选择菜单项 首选项 > 套件设置 > CSS格式 > 设置 - 默认。

不要 编辑默认设置。CSS格式更新时，您的更改将丢失。始终通过选择 首选项 > 套件设置 > CSS格式 > 设置 - 用户 来编辑用户设置。

• 缩进：格式化缩进，您可以将它设置为 " "。默认情况下，它设置为 "\t"

• expand_block_break：在 展开 格式下，设置每个规则块之后的换行。默认情况下，它设置为 "\n\n"。

• format_on_save：将其设置为 true 以在保存时触发格式。默认情况下，它设置为 false。

• format_on_save_action：格式化操作。您可以参考 设置 - 默认。默认情况下，它设置为 "expand"。

• format_on_save_filter：CSS格式与正在保存的文件的名称与以下正则表达式进行匹配，以确定是否应触发构建。默认情况下，此设置有一个值为 "\\.(css|sass|scss|less)$"。

作者

由 Mutian （http://mutian.wang） 创建。

更多信息，您可以发送电子邮件给我：mutian(a)me.com！

致谢

有关中文信息，请访问 http://mutian.wang/1508。