Stylus: создание переменной CamelCase

Глядя на создание заполнителей camelCase во вновь созданной переменной Stylus (дополнительный вопрос к этому ):

  • 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 API или изначально в Stylus?


javascript css stylus
person user1429980    schedule 25.08.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

В Stylus нет функции to-upper-case, но вы можете легко добавить ее с помощью JS API и использовать встроенная функция. Например:

в верхний регистр.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"))
person Panya    schedule 25.08.2014
comment
Не работает для меня. Стилус просто выдает переменные, когда они не определены. Используя тот же самый код, который вы предоставили, наибольший успех, который у меня был, это $marginMini, но, тем не менее, это всегда 0. Можете ли вы привести рабочий пример? Может кодеп? - person user1429980; 29.08.2014
comment
Вот суть, где у меня возникает другая проблема: gist.github.com/srsgores/2ade408a99af1f41d252 Я получаю сообщение об ошибке в верхнем регистре принимает строку или идентификатор, но получил функцию, пытаясь обернуть функцию в собственный стилус: - person user1429980; 29.08.2014
comment
Вы получаете эту ошибку, потому что у Stylus есть встроенные функции только с одной буквой (например, s и p). Вы должны преобразовать их в строку, используя конкатенацию: to-upper-case('' + substr(string, 0, 1)) + substr(string, 1). Или вы можете изменить код плагина, чтобы он принимал функции (return function.name.toUpperCase()) - person Panya; 29.08.2014
comment
Это сработало. Любой, кто заинтересован в рабочем примере этого, должен увидеть мой новый helpers.styl: github.com/srsgores/stylus-boilerplate/blob/master/app/styles/ - person user1429980; 30.08.2014