CSS for variable in range-CodePudding

I'm currently attempting to port the (open source) website keyboard-layout-editor.com to my personal github site so I can try to add new features to this currently unmaintained site. But I've come across something I've never seen before in the site's css, and can't find anything about this syntax online. Here's the code in question:

for i in (1..9) {
  .keylabel.textsize{i} {
    font-size: (6 2*i)px;
    line-height: 1em;
  }
}

I can understand what it does, since I've seen similar things in java before, but I can't seem to find out why it works on the original site, but not on mine. I think I have all of the extensions in use, so if you've seen this before and know what I need to make it work, it would be much appreciated.

GitHub repo

CodePudding user response：

Check the comments in the Makefile -- it calls out the use of stylus:

Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.

Makefile:

# Rules to run Stylus on our .css files
css_files: css/kb.css css/kbd-webfont.css 
css/%.css: %.css
    $(call mkdir,$(dir $@))
    stylus --out css -c -m --inline --with {limit:1024} $^

The installation of it is mentioned in the README, which it sounds like you've already installed. (Sadly, they don't call out the version needed -- hopefully there have been no breaking changes in Stylus the 4 years since this repo was last touched.):

...
Stylus: npm install -g stylus

CodePudding user response：

Its not native CCS but probably from a CSS preprocessor called Stylus