Hayaku ^1.5.4

Hayaku 是一个有用的脚本集合，旨在加速前端 Web 开发。

Hayaku 的主要目标是创建一种在编辑器中编写和维护 CSS 代码的最快方式。

目录

1. 为 Sublime Text 安装 Hayaku

2. 功能

   • 智能 CSS 缩写
     • 模糊 CSS 属性缩写
     • 智能 CSS 值缩写
     • 缩写中的数值
     • 缩写中的颜色值 与 RGBA 值
     • 重要性修饰符
     • 默认值
     • 剪贴板默认值
   • 后扩展
     • 简单的属性后扩展
     • 单位的后扩展
     • 颜色的后扩展
     • 重要性后扩展
   • 创建新的 CSS 规则块
   • 内联注释
     
     
   • 值循环 ^新功能！
     • 支持的价值类型
     • 基础
     • 快捷键

3. 设置和首选项

   • 用户字典 ^新功能！
     • 用户字典的语法
     • 用户字典覆盖
   • 用户别名 ^新功能！
   • 同时使用字典和别名 ^新功能！
   • 字典和别名的额外作用域
   • 自动猜测代码风格
   • 单一代码风格
   • 扩展后自动换行
   • 引号和 URL
   • 无单位的值的单位
   • 前缀选项
     • 前缀的对齐方式
     • 只使用特定的前缀
   • 颜色的选项
     • 颜色的首字母大写
     • 缩写颜色
       
       

4. 与 CSS 预处理器一起使用 Hayaku

5. 许可和版权

为 Sublime Text 安装 Hayaku

目前，Hayaku 仅适用于 Sublime Text（甚至适用于第三个版本！），但一旦完成，我们将将其移植到其他编辑器。

使用 Package Control

1. 运行 Package Control: Install Package 命令
2. 搜索 Hayaku - 快速编写CSS的工具 （Hayaku 足够）并等待安装完成
3. 重新启动Sublime Text（以便使不同语法的默认设置正常工作）

或者，手动使用git

将仓库克隆到Packages目录（在Sublime Text中，可以使用首选项: 浏览包命令找到）

git clone git://github.com/hayaku/hayaku.git

然后重新启动Sublime Text。

关于自动完成的说明

重要： Hayaku默认禁用了CSS的自动完成功能。这是为了避免当你看到自动完成中的结果，但在按下tab时得到不同结果时的模糊性和混淆。

您可以通过在您的User/Preferences.sublime-settings中重新定义auto_complete_selector设置来恢复自动完成

{
    "auto_complete_selector": "source - comment, meta.tag - punctuation.definition.tag.begin"
}

或使用任何其他您想要的值。

然而，对于CSS作用域，这仅会通过enter启用自动完成，当可能时，tab自动完成仍将运行Hayaku。

功能

智能 CSS 缩写

Hayaku不是普通的代码片段引擎。到目前为止，大多数CSS代码片段都是静态的——如果您想使用它们，您需要记住所有的缩写。

Hayaku提供了一种更好、更快的办法：您不需要记住任何东西，您只需尝试输入CSS要写的事情的最短缩写即可——在您按下tab时，Hayaku会尝试猜出它。

Hayaku在缩写方面可以做很多事情，以下是一些示例

模糊 CSS 属性缩写

这是第一个基本功能：Hayaku没有为CSS准备任何代码片段，它有一个包含大量CSS属性的字典，所以当您编写某些缩写时，它会尝试解析并猜测您的意图。对于大多数属性，这些缩写可以相当短，但您并不局限于它们：您可以为一个属性编写尽可能多的字母。

因此，编写w、wi或wid将给出width。不要忘记模糊匹配部分：wdt和wdth也适用。

有时您会猜测某些缩写必须变成其他things，但大多数情况下，所有变体都有一个背后的逻辑。b可以展开为background或border，但展开为bottom——这是因为它将所有“边”值缩写为单个字母：left、right、top，因此bottom遵循这条路径。

然而，如果您认为某些缩写需要具有不同的扩展，请随时提交问题。

智能 CSS 值缩写

以下是Hayaku的第二个基本功能，非常棒的功能。您可以针对属性+值部分扩展缩写，但您不需要在这些缩写中使用任何分隔符！没错——您只需编写类似por的内容即可获得position: relative！

这也支持模糊匹配，因此要获得position: relative，您可以使用任意数量的字母：pore、posrel、pstnrltv等。此外，如果您想要，您仍然可以使用分隔符——只需在属性和值之间添加冒号即可获得相同的结果。因此，如果您想坚持Zen风格，请使用它——pos:r会按照预期工作。而p:r也会工作——而pr会展开为padding-right，添加分隔符可以帮助消除歧义——填充不能有任何包含r值的值，因此Hayaku会回退到position。

缩写中的数值

Hayaku理解许多编写数值缩写的方法。

• 您只需在缩写后写一个数字即可将其视为值：w10将展开为width: 10px（看到了吗？自动像素！）

• 也支持负数：ml-10将展开为margin-left: -10px。

• 如果您在缩写中写一个点，则在Hayaku中会猜测您需要的是em，因此w10.5将展开为width: 10.5em。

• 某些单位有缩写，例如 percent 用于 %，或 . 用于 em，所以 100p 将扩展为 100%，10. 将扩展为 10em。

• 所有其他单位都受到支持，例如 h2pt 将扩展为 height:2pt 等等。也有模糊猜测：如果你想使用 vh，可以只写 w10h，就会得到 width: 10vh。

缩写中的颜色值

实际上，你不仅可以扩展字符串和数字，甚至可以使用缩写来扩展颜色！你可以使用不同的方式来实现这一点（就像在 Hayaku 中的一切），所以只需看一下这些示例

• c0 → color: #000
• cF → color: #FFF（使用大写字母告诉 Hayaku 它是一个颜色）
• cFA → color: #FAFAFA
• c#fa → color: #FAFAFA（在使用 # 的情况下不需要大写字母）

当然，你在任何期望使用颜色的地方都可以使用它，所以 brc0 将扩展为 border-right-color: #000;

RGBA 值

还有一种方法可以扩展颜色中的 rgba 值——你可以在点后使用 rgba 的 alpha 通道，或者在使用完整颜色后使用十六进制的 alpha 通道，如果愿意的话。看起来是这样的

• c0.5 → color: rgba(0,0,0,.5)
• cF.2 → color: rgba(255,255,255,.2)
• cABCD → color: rgba(170,187,204,0.87)
• cABC80 → color: rgba(170,187,204,0.5)

你也可以只写点，并得到 rgba 的 alpha 部分的占位符。

• cF00. → color: rgba(255,0,0,.[5])

重要性修饰符

一个不错的小特性：在缩写后加 !，就可以得到末尾的 !important。虽然重要性不是你每天都会用到的东西，但仍然有用。

dn! 会给你 display:none !important;，对吧。

自动供应商前缀

如果你需要一些供应商前缀，Hayaku 可以提供它们！

bra1.5 将扩展为这样的内容

-webkit-border-radius: 1.5em;
        border-radius: 1.5em;

目前没有针对数值（如渐变等）的前缀，但将来会有。

默认值

如果你写的内容只是一个属性（正如 Hayaku 所猜测的），Hayaku 会插入一些具有默认值的代码片段供你选择，这样你可以开始编写自己的值来替换它，或者按 tab 键来保留它并继续前进。所以，输入 w 实际上会扩展为 width: [100%]（括号意味着此值已默认选中）。

剪贴板默认值

除了常规的默认值外，Hayaku 还会尝试使用你的剪贴板来获取默认值。

目前适用于颜色和图像网址

• 如果你剪贴板中有颜色（十六进制、rgb(a) 或 hsl(a)），Hayaku 会将其用作默认的显示值。即使值是哈希值，也会应用此规则，所以，如果你从任何地方复制了 808080，那么在展开 c 时，你会得到 color: #[808080]。

• 如果你剪贴板中有图像网址（甚至是相对路径，Hayaku 都会查看扩展名），它将在 url() 内作为默认值添加。有关如何调整插入网址的引号，请参阅 引号和网址 设置。

配置剪贴板默认值

Hayaku 提供了一个设置来设置剪贴板默认值的行为： hayaku_CSS_clipboard_defaults。它是一个数组，其中包含 Hayaku 可以接受的默认值类型。因此，要禁用所有剪贴板默认值，可以使用此设置

{
    "hayaku_CSS_clipboard_defaults": [""]
}

后扩展

"Postexpands" 是 Hayaku 的一个不错特性，允许你首先扩展属性，然后快速完成数字值。

必须说的是，postexpand 稍微不同于常规的缩写扩展——它没有模糊搜索，所以只有首字母有效。然而，随着你的使用，你会看到它仍然是一个强大的功能。

简单的属性后扩展

最简单的postexpand功能是不同属性的字符串值的自动完成。

如果您将某些属性，如po展开到position: |;，那么您就可以开始写入它的任何值，并在光标后立即完成。所以，写入a会得到position: a|bsolute;。

单位的后扩展

另一个postexpand功能允许您首先展开可以具有数值的属性，如width，然后只写入数字，让Hayaku自动放置相应的单位。

因此，当您展开，例如，w到width: |;时，您会得到不同的选项

• 写入任意整数，例如10，您会得到width: 10|px;
• 写入任意浮点数，例如1.5，您会得到width: 1.5|em;
• 写入一个整数然后e，所以您会得到width: 10e|m;
• 如果值具有任何字符串值，您也可以使用它们：写入a会得到width: a|uto;

负数仍然可以使用，如果您想使用任何其他单位，只需写下它，自动完成的单位不会打扰您。

颜色的后扩展

由于您可以使用颜色缩写缩写，您也可以仅展开属性后写入颜色值。基本原理相同：color: |; + F会得到color: #F|FF;，等等。您可以使用或不使用哈希符号。

另一个模糊（但有用）的特性是对rgba颜色的postexpand。这是在写入十进制值后的逗号后触发的。还有对alpha值的快捷方式。

• color: 255,|会转换为color: rgba(255,|255,255,1);
• color: 255,.|会转换为color: rgba(255,255,255,.|5);

这里有很多我们可以改进的地方，所以请耐心等待。

重要性后扩展

如果您想使某些值重要，只需写下!important关键字的前几个符号，Hayaku就会为您完成。

禁用postexpand

如果您出于某种原因希望完全禁用postexpand，您可以使用此设置："hayaku_CSS_disable_postexpand": true

创建新的 CSS 规则块

在Hayaku中有一个简单但强大的特性：当你写下选择器时，您可以按CMD+Enter来得到在这里写入CSS的块。

内联注释

另一个小助手：在CSS中写入//，会展开为/* | */（其中竖线是插入点）。

如果您想禁用内联注释，可以使用此设置："hayaku_CSS_disable_inline_comment": true

此功能正在开发中，我们计划添加许多内容，使注释更有趣。

值循环

Hayaku提供的一个大型功能——循环值的强大实现。您可以使用它来增加或减少任何数值（在CSS和任何其他地方）以及循环通过给定CSS属性的所有可能的值。

支持的价值类型

• CSS值——无论是数值，如10px，还是字符串值，如position: fixed都受到支持。
• ISO格式的日期.
• semver版本.
• 任何数字——甚至在像$foo4这样的单词字符串中。

基础

与其他类似实现不同，Hayaku的循环功能要强大得多，且更加完善。

• 当没有任何内容被选中时，Hayaku会在行中找到与光标最接近的值，然后循环通过它。

• 当只选中数字的一部分时，Hayaku会理解上下文，循环选中的数字，但只处理整个数字，因此您可以轻松地按100、1000或0.001等增加或减少数字。

• Hayaku会尽力保存光标或选区的位置，在替换后进行调整。这样，无论发生什么，您都会回到与之前相同的位置。

• Hayaku可以完美处理多个光标，循环通过每一个光标。

• Hayaku可以处理多行选区，循环通过每一行的第一个值。

• Hayaku可以循环遍历CSS属性的值，如position的值在static、relative和absolute之间。

• 它可以使用所有Hayaku的电力！它已经可以使用Hayaku的字典来遍历CSS属性值，并正确处理不能为负的属性，Hayaku的未来版本还将有许多新增功能。

我们正在努力使这个功能尽可能圆滑，欢迎您报告任何，甚至是周期中的微不足道的错误，并提出改进意见！

快捷键

默认命令有三种变体

• alt+↑ 和 alt+↓ 会调用默认动作 —— 增加或减少数值一位，遍历CSS属性等。
• alt+ctrl+↑ 和 alt+ctrl+↓（Windows上用 win 键代替 ctrl）会调用“降低”动作，对于除了数值之外的所有东西都会执行相同的操作——它会将它们增加或减少 0.1。
• 另一方面，alt+shift+↑ 和 alt+shift+↓ 会增加或减少数值 10，对其他类型的值执行所有默认操作。

如果您想使用自己的键位绑定或者Hayaku的键位与已安装的其他包冲突，您可以使用User/Preferences.sublime-settings中的这个设置来禁用默认键位绑定。

"hayaku_use_default_cycling_keymaps": false

否则，如果您想更精确地控制任何操作，您可以在您的User/*.sublime-keymap中重新定义这个动作的键位绑定，如下所示

{
    "keys": ["alt+up"],
    "command": "hayaku_cycling_through_values",
    "args": {"modifier": 1}
},

modifier 同时是方向（用于遍历）和数量（用于数值），所以为了遍历CSS值并减少数值 3，您可以在其中输入 "args": {"modifier": -3}.

设置和首选项

Hayaku有很多不同的可配置选项，包括您的代码风格和您希望使用的不同功能。

用户词典

Hayaku没有预设的代码片段列表。它有一个包含属性、它们的值和其他Hayaku用于使编写CSS成为一次美妙体验的信息的字典。

如果您没有看到您使用的属性或某些属性的值，或者您想更改默认设置，您可以使用您想要的任何内容来扩展和覆盖内置字典。

这就是为什么有三个特定的设置默认可用：hayaku_user_dict、hayaku_syntax_dict 和 hayaku_project_dict。

这些设置以相同的方式工作，在给定的顺序应用在提供的字典之后内置字典。

为什么有三个设置——让您按照Sublime Text的方式设置覆盖。Sublime Text有不同的范围用于首选项：用户、语法特定和项目，当您在首选项中声明任何设置时，所有这些设置都会合并在一起。尽管如此，每个特定的设置都会被下一个范围中同名设置完全覆盖，因此没有简单的方法使用一个名字来合并东西。这正是为什么Hayaku提供了三个设置：您可以在您的User/Preferences.sublime-settings中使用hayaku_user_dict，然后使用hayaku_syntax_dict添加其他东西，例如在user/Stylus.sublime-settings中的语法特定设置，最后，在您的*.sublime-project文件中为您的特定项目进行覆盖。

所有三个设置的语法都是相同的，尽管不要忘记，对于.sublime-project您需要在"settings": {}键中放置设置。

用户字典的语法

Hayaku使用json来定义字典，您可以看到内置的例子。

字典是一个数组，包含了具有如下结构的属性对象

{
    "name": "position",
    "values": [ "static", "relative", "absolute", "fixed" ]
}

其中name是属性的名称，而values是可能值的数组。

这是一个最简单的示例，但可能会更复杂的条目，如下所示

{
    "name": "width, height, min-width, min-height",
    "values": [ "auto", "<dimension>" ],
    "default": "100%",
    "always_positive": true
}

这里有四点需要提及

1. 您可以在name中指定多个属性，只需用逗号和可选空格分隔即可。

2. 有一些特殊实体可以出现在值中，例如<dimension>，这意味着如果有名为此的“属性”条目，它将会被展开。将其视为链接。

3. 存在一个可能的default键，包含如果未提供值则在结果中插入的值。

4. 存在一个always_positive键，告诉Hayaku这个属性只接受正数，因此循环功能不会将其减小到零以下。

还有其他可能的值，您可以阅读内置字典，查看有哪些（未来，我们当然会在文档中解释所有这些）。

用户字典覆盖

除了上述内容外，还有一些您可以使用但内置字典中没有的东西。

第一个是能够从字典中删除值的能力，只需使用remove_values键和从给定属性中删除的值的数组即可。

例如，这个User字典将静态从位置删除

{
    "hayaku_user_dict": [
        {
            "name": "position",
            "remove_values": ["static"]
        }
    ]
}

第二点是您可以控制新值放置的位置。默认情况下，它们会放置在所有内置值之前，但如果您需要更改此操作，您可以在values数组中使用"..."令牌定义内置字典中未定义的值应该放置的位置。这是通过在values数组中使用"..."令牌来完成的。一个例子

{
    "hayaku_user_dict": [
        {
            "name": "position",
            "values": ["static", "..." ,"sticky"]
        }
    ]
}

这样的字典会先放置静态值，然后放置所有其他内置值，最后是粘性值。

用户别名

在某些情况下，您可能想缩写某些缩写以指向不同的属性，例如，您想让z指向z-index而不是指向缩放。为此，有一些与字典类似的设置：hayaku_user_aliases、hayaku_syntax_aliases和hayaku_project_aliases。

{
    "hayaku_user_aliases": {
        "z": "z-index"
    }
}

会为您完成工作。

您可以为属性或属性值部分创建别名，因此您可以创建这样的缩写：

{
    "hayaku_user_aliases": {
        "fv": "font: 11px/1.5 Verdana, sans-serif"
    }
}

然后在使用fv之后的制表符会给出您期望的输出。

然而，您也可以使用用户字典来做到这一点

{
    "hayaku_user_dict": {
        "CSS": [
            {
                "name": "font",
                "values": [
                    "11px/1.5 Verdana, sans-serif"
                ]
            }
        ]
    }
}

然后，您可以写入fver、fonve、f:v或其他任何Hayaku会展开到期望输出的缩写。

同时使用字典和别名

创建别名和在用户字典中定义新值之间的区别在于，别名的作用类似于静态片段（增加可能值），但字典中的新值会被其他值和属性一起处理，Hayaku仍然会使用它的算法，并且会为fv选择font-variant而不是选择font: 11px/1.5 Verdana, sans-serif。

但是，别名中的一个好处是它们不是指向一些静态字符串的别名，而是指向Hayaku缩写。这样，您可以将其添加到用户设置中

{
    "hayaku_user_aliases": {
        "fv": "font:verdana"
    },
    "hayaku_user_dict": {
        "CSS": [
            {
                "name": "font",
                "values": [
                    "11px/1.5 Verdana, sans-serif"
                ]
            }
        ]
    }
}

然后，您将有两种缩写，如fove均可工作，并且fv会被别名所替代，这将像预期那样工作！这也意味着重用，所以如果您想更改那个值，您只需要在一个地方更改它。

字典和别名的额外作用域

如果您需要超过三个作用域，您可以通过使用接受作用域数组的hayaku_extra_scopes选项来添加更多。

例如，"hayaku_extra_scopes": ['ololo'],将允许您定义额外的hayaku_ololo_dict和hayaku_ololo_aliases，这将按给定顺序在user、syntax和project之后合并。

自动猜测代码风格

设置您代码风格基本设置的最简单方法就是使用hayaku_CSS_syntax_autoguess选项

{
    "hayaku_CSS_syntax_autoguess": [
        "    selector {              ",
        "        property: value;    ",
        "        }                   "
    ]
}

在这里，你可以在预定义关键字之间使用任何空格，它们将被Hayaku使用。关于此设置的几点说明

• 你应该使用换行符\n或多个数组项，因为JSON不支持多行。
• 为了方便，你可以使用任何前导或尾随空格。所有尾随空格都会被删除，前导空格会在选择器的开头处被视为无空格。

也许有一天会出现真正的自动猜测，它会读取你的开放式样表并找到更适合它的内容，但现在还没有。

单一代码风格

如果你不希望使用自动猜测，那么你可以逐个定义选项。如果你只想在其他项目或语法中重新定义某些代码样式设置，这也会很有帮助。

这里有一个包含所有可用单一代码样式选项的JSON

{
    "hayaku_CSS_whitespace_after_colon":        " ",
    "hayaku_CSS_whitespace_block_start_before": " ",
    "hayaku_CSS_whitespace_block_start_after":  "\n\t",
    "hayaku_CSS_whitespace_block_end_before":   "\n\t",
    "hayaku_CSS_whitespace_block_end_after":    ""
}

那里的名称就足以说明问题了。

重要的是，单一代码样式设置始终会覆盖自动猜测的结果。

扩展后自动换行

这是一个试验性的功能，默认是禁用的。要启用它，请使用此设置

{
    "hayaku_CSS_newline_after_expand": true
}

使用此设置，你可以节省一点时间，因为Hayaku在你扩展缩写词之后会添加新行。唯一的缺点是，当你完成选择器或在你插入现有行之间时，你需要删除一行。

引号和 URL

默认情况下，Hayaku使用双引号来进行不同CSS操作（如content: ""）。你可以通过设置此值来更改它

{
    "hayaku_CSS_syntax_quote_symbol": "'"
}

此外，默认情况下，图像URL在CSS-like语法中不会有引号，在Sass或Stylus中会有引号，你可以通过设置hayaku_CSS_syntax_url_quotes设置为true或false来覆盖自动行为。

无单位的值的单位

默认情况下，Hayaku不会为line-height之类的属性添加em或px单位。如果你不使用无单位值，你可以像这样启用它们

{
    "hayaku_CSS_units_for_unitless_numbers": true
}

前缀选项

如果你完全不想使用任何前缀（就像你在Stylus中使用一些mixin或使用prefix-free一样），你可以使用此选项禁用它们

{
    "hayaku_CSS_prefixes_disable": true
}

前缀的对齐方式

默认情况下，Hayaku会以这种方式扩展已扩展的前缀属性

.foo {
    -webkit-transform: rotate(45deg);
       -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
         -o-transform: rotate(45deg);
            transform: rotate(45deg);
    }

这样更容易发现单个前缀属性的变化，并且可以对其使用多行编辑。

然而，如果你想左对齐扩展这样的属性，请设置

{
    "hayaku_CSS_prefixes_align": false
}

只使用特定的前缀

这不是你经常会用到的功能，但如果需要，你可以只为特定的浏览器使用前缀。有两个设置用于此目的

{
    "hayaku_CSS_prefixes_only": ["webkit","moz","o"],
    "hayaku_CSS_prefixes_no_unprefixed": true
}

• hayaku_CSS_prefixes_only是一个只使用前缀的数组。在上面的例子中，我排除了ms前缀，所以如果你使用meta来模拟所有IE版本到IE7，例如，那么你可以删除ms前缀，这样你的CSS会更加干净。
• 当hayaku_CSS_prefixes_no_unprefixed设置为True时，这样的前缀组将不包括不受前缀修饰的官方变体。

目前没有调整每个属性前缀的简单方法，但不久的将来会有，所以请保持关注!

颜色的选项

请注意，这些设置将适用于所有预设和扩展的颜色，如默认颜色值，但不会因它们的机理而对postexpands生效。

颜色的首字母大写

你可以告诉Hayaku你喜欢小写还是大写颜色值，这样它就会在展开缩写时改变大小写，如c#f、cF等。

默认值是大写，因此c#f会变成color: #FFF。如果你想要将其更改为小写，可以按照这种方式设置

{
    "hayaku_CSS_colors_case": "lowercase"
}

如果你想让颜色保持原样，可以使用值initial。

缩写颜色

默认情况下，Hayaku会缩短颜色，所以如果可以展开为#FFFFFF，Hayaku会使其变为#FFF。

然而，如果你希望，可以使用此设置来重新定义此行为

{
    "hayaku_CSS_colors_length": "long"
}

这将使cF扩展为color: #FFFFFF。

与 CSS 预处理器一起使用 Hayaku

“嗨！我不需要写CSS更快——我使用预处理器！”你可能会说。但是，好吧，你仍然需要写所有那些额外的符号，因此缩写非常适合预处理器。并且由于Hayaku高度可定制，你可以与任何预处理器一起使用：Sass、Less、Stylus等。

目前只有基本功能可用，但将来你也可以扩展不同的mixin和函数，所以请耐心等待。

这只是开始，还有很多其他出色的功能，所以请继续关注并关注官方bundle的Twitter！

致谢

Hayaku CSS的最初想法来源于Vadim Makeev（《Zen CSS》）和Vitaly Harisov（《CSS Snippets》）合并的想法。非常感谢他们！

许可和版权

本软件遵循MIT许可协议。