ctrl+shift+p filters: :st2 :st3 :win :osx :linux
浏览

CSScheme

由 FichteFoll 全部

在 CSS、SCSS 或 stylus 中创建 Sublime Text 或 Text Mate 色彩方案

标签 色彩方案编辑

详细信息

  • 1.3.0
    1.0.1
    1.0.0
  • github.​com
  • github.​com
  • 8 年前
  • 1 小时前
  • 10 年前

安装次数

  • 总数 9K
  • Win 7K
  • Mac 1K
  • Linux 931
8 月 6 日 8 月 5 日 8 月 4 日 8 月 3 日 8 月 2 日 8 月 1 日 7 月 31 日 7 月 30 日 7 月 29 日 7 月 28 日 7 月 27 日 7 月 26 日 7 月 25 日 7 月 24 日 7 月 23 日 7 月 22 日 7 月 21 日 7 月 20 日 7 月 19 日 7 月 18 日 7 月 17 日 7 月 16 日 7 月 15 日 7 月 14 日 7 月 13 日 7 月 12 日 7 月 11 日 7 月 10 日 7 月 9 日 7 月 8 日 7 月 7 日 7 月 6 日 7 月 5 日 7 月 4 日 7 月 3 日 7 月 2 日 7 月 1 日 6 月 30 日 6 月 29 日 6 月 28 日 6 月 27 日 6 月 26 日 6 月 25 日 6 月 24 日 6 月 23 日
Windows 0 1 1 2 0 1 0 1 0 0 0 0 1 1 1 0 0 0 2 0 1 0 0 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 1 1 1 1 1 1 1
Mac 1 1 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0
Linux 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0

说明

源代码
raw.​githubusercontent.​com

CSScheme - Sublime Text 插件

Build Status

曾想过手动编写 .tmTheme 文件很糟糕吗？但是其他编辑色彩方案的选择还不够程序化？那么这就是为你准备的！

CSScheme 是一种类似于 CSS 的自定义语法，可以将内容转换为我们所有人喜爱的 .tmTheme 文件，但这还不止于此。CSScheme（软件包）还可以处理 将 SCSS、SASS 或 stylus 编译成 CSScheme（语法），然后使用这些预编译器的所有功能（如变量、条件或函数）将其转换为色彩方案。

查看 示例文件 了解可行性！

安装

使用 包控制 将“CSScheme”安装安装。

使用方法（请阅读！）

您可以通过使用 CSScheme: 创建新的 *Scheme 文件 命令来创建一个新文件，通过 .csscheme、.scsscheme、.sasscheme 或 .styluscheme 扩展名打开一个文件，或者使用 CSScheme: 转换到 CSScheme 命令或构建系统将现有的 tmTheme 文件转换为 CSScheme。目前不支持转换为其他语法，并且未来可能也不会支持。请手动转换并根据自己的喜好进行。

构建（ctrl+b 或 ⌘b）将在需要时将文件转换为 CSScheme，然后转换为 .tmTheme 文件。转换过程中的错误将被捕获在一个输出面板中。为了自动化 purposes，命令名为 convert_csscheme。

使用 CSScheme 时必须考虑的一些事项

  • 将 @ at-rule 添加到“外部字典”中以字符串值，您可以使用全局 @name 规则来指定方案的名称。编译后，规则集中的 @name 规则将显示为各种色彩方案编辑工具的名称。Sublime Text 本身不会使用它。
  • 为了创建一个 .hidden-tmTheme 文件，您需要指定一个全局的 @hidden true; 规则。转换器将消耗此规则，并相应地更改输出文件的扩展名。
  • 若要使某个属性没有字体样式，您必须指定 fontStyle: none;。这将被转换为 <key>fontStyle</key><string />。
  • 一般设置（如主背景色）是从一个带有 * 选择器的通用块中读取的。这是必需的。
  • 指定 uuid（通过 @uuid）是可选的，因为 Sublime Text 会忽略它。

在使用 CSScheme 与 SCSS 或 SASS 时必须额外考虑的事情

  • 请确保 sass 添加到您的 PATH 或在设置中调整可执行文件的路径。
  • SASS 解析器不接受原始的 #RRGGBBAA 哈希。您必须用字符串包围它们，例如 '#12345678'，或者直接使用 rgba() 表示法。
  • SASS 解析器也不会与多个范围选择器运算符（如 -、&、(、)、|）一起工作。您必须用反斜杠转义这些运算符。同样也适用于以数字开头的作用域段。

CSScheme 将负责在输出最终转换结果之前删除反斜杠。示例可以在示例文件中找到。

注意：因为 SASS 解析器不了解这些运算符的语义，所以当与作用域嵌套一起使用时，它们通常会表现不佳。

在使用 CSScheme 与 stylus 时必须额外考虑的事情

  • 请确保 stylus 已添加到您的 PATH 或在设置中调整可执行文件的路径。
  • 例如全局所必需的 @name 规则必须用 unquote() 封闭。例如：unquote('@name "Example StyluScheme";')
  • 非全局范围的作用域规则 不工作！如果您只需要 @name 或可能的 @comment，那么 stylus 会做些奇怪的事情，这些事情无法转换成合理的 CSScheme。

支持语法

CSScheme（包）为 CSScheme 到 .tmTheme 的转换提供了原生支持。因此，所有编译为 CSS 的语言都以某种方式工作。SCSS/SASS 和 stylus 在 Sublime Text 内部自动编译，SCSScheme 更有自己的语法定义，因为来自 SCSS 包的定义会将未知属性高亮显示为无效。此外，它们还提供代码片段和补全。

  • CSScheme 和 SCSScheme 的语法高亮显示已集成。为两者提供代码片段和补全。
  • 对于 SASScheme 语法高亮显示，您还需要Sass包。
  • 对于 StyluScheme 语法高亮显示，您还需要Stylus包。

如果您想使用不同的预处理器，您可以通过在外部将其转换为 CSScheme，然后在 Sublime Text 中从 CSScheme 到 tmTheme 进行转换来实现。如果您想支持额外的预处理器，请随时提交问题（如果还未提交）。

用于创建方案的实用程序

（仅限 CSScheme 和 SCSScheme）

符号列表

只需按下 ctrl+r（《⌘r`》）

在 StyluScheme 中这“某种程度上”被支持，但由于作用域名称不是常规 HTML 标签，它们不会被识别（因为我没有麻烦为 stylus 也编写一个新的语法定义）。

代码片段

  • *（《*` 规则集）
  • r（通用规则集）

仅限于 SCSScheme

  • mixin、=（短为 mixin）
  • if、elif、else
  • for（从 … 到）、fort（从 … 通过）
  • each
  • while

补全

所有已知属性都已完成，当指定选择器时，还包括来自Text Mate范围命名约定的基本范围。

有用资源

以下是一些可能有助您在调整颜色方案时的工作的链接。

示例文件

我准备了两个示例文件，这些文件仅作为一个概念性证明，展示了所支持的几个特性。颜色本身并没有很多意义，也不是很美观，因为我几乎完全随机挑选，但它能给人一些关于可能性的深刻见解。

如果您想看到实际世界的例子，请参考由alehandrof的Writerly颜色方案，它大量使用SASS的@import来使更大的颜色方案更易于管理。

便于创建颜色方案的其它努力

请注意，所有这些都是在.tmTheme文件上直接操作的。