css - 在客户端编译 scss 以保存在网络上

Question

我见过this example对于使用 css 的动画星星背景，并注意到在这种情况下编译的 css 明显更小，因为 sass 在循环中生成了一千颗星星。

// n is number of stars required
@function multiple-box-shadow ($n) 
  $value: '#{random(2000)}px #{random(2000)}px #FFF'
  @for $i from 2 through $n
    $value: '#{$value} , #{random(2000)}px #{random(2000)}px #FFF'

  @return unquote($value)

这让我想知道，有没有办法在客户端生成所说的 css？网络带宽的节省不会超过生成 css 的(微乎其微的)成本吗？

我找不到这种用例的示例，网络流量的压缩是否使这无关紧要？

我不一定要专门询问这个案例。更多关于带宽与计算时间的考虑(如果有的话)。对于具有使用更简洁语法(如 Angular 中的 ngFor)在客户端生成 HTML 的 js 框架，也可以这样说。

Answer 1

Sass 编译器是用 C++ 编写的，因此在浏览器中运行它或多或少是不可能的。
相反，您可以使用 Less ，它在浏览器中运行得很好。

index.html

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js" ></script>

multiple-box-shadow.js

(this plugin is needed, because Less cannot generates random numbers by itself)

registerPlugin({
  install: function(less, pluginManager, functions) {
      functions.add('multiple-box-shadow', function(n) {
          return Array(n.value).fill().map(function() {
              var x = Math.floor(Math.random()*2000);
              var y = Math.floor(Math.random()*2000);
              return x+'px '+y+'px #FFF';
          }).join(',');
      });
  }
});

styles.less

@plugin "multiple-box-shadow";

@shadows-small:  multiple-box-shadow(700);
@shadows-medium: multiple-box-shadow(200);
@shadows-big:    multiple-box-shadow(100);

#stars {
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: @shadows-big;
    animation: animStar 50s linear infinite;
}

对于您的具体示例:

样式.css:41'277 B(压缩5'936 B)

styels.less:1'856 B(压缩 586 B)

在控制台中，较少的输出生成时间，在我的电脑上需要 100 到 200 毫秒。
我认为在客户端编译的好处非常低。
编译后的 CSS 比其源代码大的情况非常罕见，主要是因为 CSS 编译器会缩小其输出。