手写笔:生成CamelCase变量

Question

希望在新生成的Stylus变量(后续问题对这一个)中生成camelCase占位符：

• smallMarginTop
• normalMarginTop

等。

properties = margin padding

proportions = mini small normal medium large

for property in properties
    for proportion, i in proportions // Generate basic proportion placeholders: ex. small-padding, medium-padding, etc.
        define("$" + property + proportion, unit(i / 3, "em")) // should give something like $marginSmall = ... -- thinking something like toUpperCase?

如何通过Javascript或在Stylus内部实现这一点？

Answer 1

Stylus中没有to-upper-case函数，但是您可以使用JS和使用内置函数轻松地添加它。例如：

to-upper-case.js

module.exports = function() {
  return function(stylus) {
    stylus.define('to-upper-case', function(node) {
      var nodeName = node.nodeName
        , val = node.string;

      if ('string' == nodeName) {
        return new stylus.nodes.String(val.toUpperCase());
      } else if ('ident' == nodeName) {
        return new stylus.nodes.Ident(val.toUpperCase());
      } else {
        throw new Error('to-upper-case accepts string or ident but got "' + nodeName + '"');
      }
    });
  };
};

test.styl

use('to-upper-case.js')

properties = margin padding

proportions = mini small normal medium large

for property in properties
  for proportion, i in proportions
    define("$" + property + to-upper-case('' + substr(proportion, 0, 1)) + substr(proportion, 1), unit(i / 3, "em"))