Compiling scss on client side to save on network

Question

I've seen this example for an animated star background using css, and noticed that the compiled css is significantly smaller in this case as the sass generates a thousand stars in a loop.

// 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)

It made me wonder, is there a way to generate said css on the client side? Wouldn't the savings on network bandwidth outweigh the (miniscule) cost of generating the css?

I could not find an example for such a use case, does the compression of network traffic make this irrelevant?

I'm not necessarily asking about this case specifically. More of how does bandwidth vs computation-time comes into consideration(if at all). The same could be said for having js frameworks that have ways of generating HTML using more concise syntax(like ngFor in Angular) on the client side.

Answer 1

The Sass compiler is written in C++, so it would be more or less impossible to run it inside a browser.

Instead you could use Less, that runs pretty well inside a browser.

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;
}

For your specific example:

• styles.css: 41'277 B (5'936 B compressed)
• styels.less: 1'856 B (586 B compressed)

In the console, less outputs the generation time, on my computer it takes between 100ms and 200ms.

I think the benefit of compiling on client side is very low. It's very uncommon to have a compiled CSS that is bigger than its source, mainly because CSS compilers minifies their output.

Answer 2

Wouldn't the savings on network bandwidth outweigh the (minuscule) cost of generating the css?

A possible argument against doing that could be that yes, you might save on bandwidth downloading a smaller SCSS file compared to CSS, but also have to supply the client with the compiler code, which (assumption) outweighs the difference in file size compared to css.

In lack of a better example I take Yann's numbers and LESS under the assumption that an imaginary SCSS compiler would show analogue behaviour:

For your specific example:
- styles.css: 41'277 B (5'936 B compressed)
- styels.less: 1'856 B (586 B compressed)

• less.min.js: 167'812 B

Unless browsers would come pre-equipped with a SCSS-Compiler therefore questioning the need for CSS file type in the first place.