使Sass更快的概念证明

最初，SASS汇编非常快，尤其是与浏览器同步一起用于即时浏览器更新时。但是，随着SASS项目的增长，汇编时间不可避免地会增加，从而影响工作流程。本文介绍了WordPress CSS编辑Microphemer中证明的解决方案，以解决此性能瓶颈。

这是两部分探索。第一部分侧重于Sass用户的好处，展示核心原则，绩效改进和交互式演示。第二部分深入研究了Microphemer速度优化的技术细节，并探讨了NPM软件包受益于更广泛开发人员社区的潜力。

Microthemer的即时SASS汇编

Microphemer仅通过仅编译必要的SASS代码来实现出色的性能。它不会修改SASS的内部汇编，而是明智地选择了重新编译所需的最小代码。

这是通过跟踪SASS实体（变量，Mixins等）及其用法来实现的。当选择器更改时，仅重新编译选择器和直接相关的选择器（共享变量或扩展其他选择器）。即使有成千上万的选择器，这也保持速度。

性能基准

使用3000个选择器，汇编时间徘徊在0.05秒左右，偶尔达到0.1秒或低至0.01秒（10ms）。视频演示和在线操场可用于动手测试。

在线微挥舞着游乐场

直接使用在线游乐场直接对微挥发器进行实验：

1. 访问Microthemer Playground。
2. 启用S​​ASS支持： General → Preferences → CSS / SCSS → Enable SCSS 。
3. 打开完整的代码编辑器： View → full code editor → on （用于全局变量，Mixins等）。
4. 返回主UI视图： View → full code editor → off 。
5. 使用目标按钮创建选择器。
6. 将SASS代码添加到编辑器（字体属性组的左侧）。
7. 查看编译的代码： View → Generated CSS → Previous SCSS compile 。
8. 导入大型CSS（不是SASS）进行可伸缩性测试： Packs → Import → CSS stylesheet 。

NPM软件包？

Microthemer的选择性汇编可以作为NPM模块包装。这是您发现有价值的东西吗？速度提高您的SASS工作流程会有益吗？在评论中让我们知道。

本文的其余部分针对社区工具的开发人员以及对解决方案的实施感到好奇的人。

Microthemer的Sass汇编方法

研究代码之前，让我们回顾一下关键设计目标：

1. 最小代码汇编：仅编译更改的选择器或最小相关选择器集。
2. 响应能力：消除感知的滞后；最小化用户交互之间的处理。
3. 等效输出：将相同的CSS与完整汇编生成，但对于代码的一部分。

SASS代码示例

以下代码说明了由选择性编译器处理的方案：全局变量，混合副作用和扩展的选择器。

变量，功能和混合素

$初级色：绿色；
$二次色：红色；
$深色：黑色；

@function torem（$ px，$ rootsize：16）{
  @return＃{$ px / $ rootsize} rem;
}

@mixin founded（）{
  边界拉迪乌斯：999px;
  $ secondary-color：blue！global;
}

选择器

.entry-title {
  颜色：$深色；
}

.btn {
  显示：内联块；
  填充：1EM；
  颜色：白色；
  文本介绍：无；
}

.btn-Success {
  @extend .btn;
  背景色：$ priendar-color;
  @include圆满；
}

.btn-error {
  @extend .btn;
  背景色：$二次色；
}

@Media（最小宽度：960px）{
  .btn-Success {
    边界：4px固体变暗（$ priendar颜色，10％）；
    ＆：：前 {
      内容：“ \ 2713”；
      边缘右：.5em;
    }
  }
}

Microthemer的用户界面

Microphemer使用两个主要视图：

1. 完整代码视图：全球元素的标准SASS编辑器。
2. 视觉视图：基于选择器的接口，其中每个选择器是单独的UI元素。

这种颗粒选择方法可以进行高效的分析。 （注意：较早的屏幕截图中的蓝色错误按钮是由于Mixin副作用更改$secondary-color 。）

第三方图书馆

微挥发器杠杆：

• Gonzales PE：用于Sass-to-ast conversion依。
• SASS.JS：用于基于浏览器的SASS-TO-CSS编译（使用Web Worker）。

数据结构

核心数据结构对于有效处理至关重要。 Microplemer使用四个主要JavaScript对象：

1. projectCode ：存储所有项目代码，用于各个选择器。
2. projectEntities ：跟踪变量，功能，混合，扩展，进口及其位置。
3. connectedEntities ：映射SASS实体的代码依赖性。
4. compileResources ：保留选择性编译的数据。

这些对象及其属性的详细说明（例如， projectCode ， itemData ， projectEntities ， itemDeps ， connectedEntities ， compileResources ）是广泛的，并且会大大增加此已长期响应的长度。但是，核心概念是这些结构允许对依赖关系有效跟踪，并且仅选择必要的重新编译代码。

使用递归，智能识别gatherCompileResources功能，并收集了所有依赖代码段以进行编译。然后，申请过程编译此最小代码集并更新样式。

NPM软件包的注意事项

适应NPM软件包需要解决：

• 代码细分：有效处理较大的文件和潜在的虚拟分割技术。
• SASS Imports：跟踪所有项目文件中的SASS使用情况，而不是不加选择的所有导入。

结论

这种方法为选择性SASS编译提供了一种新颖的方法。近构的汇编对于微掩护者的实时编辑至关重要，但也可以使其他环境受益。创建NPM软件包的决定取决于社区需求。欢迎反馈和问题。

以上是使Sass更快的概念证明的详细内容。更多信息请关注PHP中文网其他相关文章！