eCSStractor

Sublime Text 插件，用于从 HTML 中提取类名并生成用于后续工作的 CSS 重建表。

默认提取

具有 BEM 嵌套

具有 BEM 嵌套和作为注释的类名：

使用方法

打开包含 HTML 的任何文档，并执行以下操作之一：

• 在 Mac OS X 上按 Cmd+Shift+X 或在 Windows/Linux 上按 Ctrl+Shift+X。
• 转到 工具 → eCSStractor → 运行
• 右键单击并选择 eCSStractor → 运行

然后您将看到带有从文档中提取的 CSS 选择器的新标签页。

插件可以处理所选文本或整个文件。

您可以在命令面板、菜单或上下文菜单中不管 bem_nesting 选项，明确地运行 带有 BEM 嵌套检查 或 不带 BEM 嵌套检查。

选项

默认设置可以通过访问 首选项 → 套件设置 → eCSStractor → 设置 – 默认 菜单项来查看。为了确保升级套件时不会丢失设置，请确保所有编辑都保存在 设置 – 用户。

brackets

添加括号。对 Sass 语法和 Stylus 文档有用。

默认： true

brackets_newline_after

在开括号后添加新行。

默认： true

attributes

应从中提取类名的 HTML 节点属性。

默认： [“class”， “className”]

ignore

应忽略的类名列表。对于可能已经描述的辅助类很有用。例如，clearfix。有关示例，请参阅 设置 – 默认。

默认： 为空

ignore_regex

类似于ignore选项，但使用正则表达式来忽略。例如，^js-将忽略所有以js-开头的类。参见设置 – 默认阅读示例。

默认： 为空

目标位置

结果放置位置：新标签页（tab）或复制到剪贴板（clipboard）

默认：tab

bem_nesting

BEM嵌套。为预处理器生成更复杂的样式表而不是简单的样式表。参见示例部分的差异。

默认：false

仅适用于BEM嵌套开启的选项

indentation

缩进。

默认：\t

bem.element_separator

块和元素名称之间的分隔符。

默认：<_>_

bem.modifier_separator

块或元素与它们的变化之间的分隔符。

默认：–

preprocessor.parent_symbol

父符号。例如：&__element {}

默认：&

empty_line_before_nested_selector

在嵌套元素/变化之前添加空行。

默认：false

add_comments

在嵌套BEM元素和变化之前生成完整类名的注释。这对于通过类名查找选择器很有用。参见示例部分的差异。

默认：false

comment_style

注释样式显示CSS（/* */）或SCSS（//）风格的注释。启用与add_comments。

默认：“CSS”

示例

源代码

<ul class="nav nav--main">
    <li class="nav__item"><a href="" class="nav__link">Home</a></li>
    <li class="nav__item"><a href="" class="nav__link">Shop</a></li>
    <li class="nav__item"><a href="" class="nav__link nav__link--special">About</a></li>
</ul>

运行eCSStractor（BEM嵌套关闭）

.nav {
}
.nav--main {
}
.nav__item {
}
.nav__link {
}
.nav__link--special {
}

运行eCSStractor（BEM嵌套开启）

.nav {
    &--main {
    }
    &__item {
    }
    &__link {
        &--special {
        }
    }
}

运行eCSStractor（BEM嵌套和注释开启）

.nav {
    /* .nav--main */
    &--main {
    }
    /* .nav__item */
    &__item {
    }
    /* .nav__link */
    &__link {
        /* .nav__link--special */
        &--special {
        }
    }
}

运行eCSStractor（BEM嵌套和注释开启，且注释风格为SCSS）

.nav {
    // .nav--main
    &--main {
    }
    // .nav__item
    &__item {
    }
    // .nav__link
    &__link {
        // .nav__link--special
        &--special {
        }
    }
}

安装

最简单的方式是使用Package Control。

打开命令面板 Cmd+Shift+P（OS X）或 Ctrl+Shift+P（Linux/Windows），然后选择“Package Control：安装软件包”，接着搜索eCSStractor。

类似工具

我受到了extractCSS这个在线工具的启发。这个工具功能丰富，但并不十分适合常规使用。