HTML 转 Scss

由 hxss 所有

Sublime 插件

详细信息

版本 1.0.0
主页 bitbucket.org
修改日期 6年前
最后查看日期 2小时前
首次查看日期 6年前

安装次数

总数 3K
Win 3K
Mac 248
Linux 233

	2021年8月6日	2021年8月5日	2021年8月4日	2021年8月3日	2021年8月2日	2021年8月1日	2021年7月31日	2021年7月30日	2021年7月29日	2021年7月28日	2021年7月27日	2021年7月26日	2021年7月25日	2021年7月24日	2021年7月23日	2021年7月22日	2021年7月21日	2021年7月20日	2021年7月19日	2021年7月18日	2021年7月17日	2021年7月16日	2021年7月15日	2021年7月14日	2021年7月13日	2021年7月12日	2021年7月11日	2021年7月10日	2021年7月9日	2021年7月8日	2021年7月7日	2021年7月6日	2021年7月5日	2021年7月4日	2021年7月3日	2021年7月2日	2021年7月1日	2021年6月30日	2021年6月29日	2021年6月28日	2021年6月27日	2021年6月26日	2021年6月25日	2021年6月24日	2021年6月23日
Windows	0	0	0	0	0	1	1	0	0	0	2	0	0	0	0	2	0	0	0	1	0	0	0	0	0	1	0	1	1	0	0	0	1	0	0	0	0	1	0	0	0	0	1	1	0
Mac	1	1	0	0	0	0	0	0	1	0	0	1	1	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
Linux	0	0	0	0	0	0	0	0	0	0	0	0	0	1	0	0	1	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

说明文件

源代码: bitbucket.org

html2scss

此插件解析您的 HTML 并将它的 Scss 规则（按类分组）放入剪贴板。

使用方法

该软件包提供1个命令 - html2scss，带1个可选参数 - all_attrs = False。您可以使用快捷键或者通过命令面板（code>html2scss）运行它。

在您的 HTML 文件中运行该命令后，您将在状态栏中看到消息：scss 规则已复制！ 默认情况下将解析整个文件，但您可以选择任何需要的区域。

现在您可以使用 Ctrl+v 将规则粘贴到您的 scss 文件中。

示例

输入 html

<div class="class1">
    <div class="class2" id="id2" >
        <div>
            <div class="class5"></div>
            <div class="class3 cls3 cls3--mod" test></div>
            <div class="class3 otherClass"></div>
            <div class="class3 cls3" data-attribute attr="simple" test></div>
            <div class="class4"></div>
            <div class="class4"></div>
            <a href="#"></a>
        </div>
    </div>
</div>

结果规则

.class1 {

    #id2.class2 {

        .class5 {
        }

        .class3 {

            &.cls3 {

                &.cls3--mod {
                }
            }

            &.otherClass {
            }
        }

        .class4 {
        }
    }
}

包含 all_attrs 的结果规则

.class1 {

    #id2.class2 {

        .class5 {
        }

        .class3 {

            &.cls3 {

                &.cls3--mod[test] {
                }

                &[data-attribute][attr="simple"][test] {
                }
            }

            &.otherClass {
            }
        }

        .class4 {
        }
    }
}