Как избегать того, чтобы Stylus реализовал деление параметра?

Мой вопрос - точно эта же самая проблема с SASS, которая поставила в Stackoverflow, но приспособленный к Stylus. В свое время я это попробовал, но не был способен это решать и достигнув решения я думаю, что достаточно приемлемый для SASS я захотел снова взять доказательства в Stylus, но не смог решить это. В неразбериху:

У меня есть grid system, сделанный в Stylus, чтобы создавать колонну, я использую:

div.cuatro
  columns(1/4)

И я получаю этот CSS:

div.cuatro {
  width: calc((100%  * 0.25) - (12px - 12px * 0.25));
  float: left;
  margin-right: 12px;
}

Параметр 1/4 превращается в 0.25 как он должен быть, но мне хотелось бы мочь избегать того, чтобы осуществилось это деление автоматически чтобы мочь извлекать 4 и использовать это, чтобы использовать например в псевдо-классе тип: nth-child(4n).

Замечание

Меня не интересуют решения с другим синтаксисом как: columns(1, 4) так как этот mixin может приносить больше параметров, которые отделены запятыми, и он был бы смущенным, также не помещать часть между кавычками, так как он ломает со стилем оставшейся части mixins и функций.


В Stylus я не могу использовать тот же прием, что и в SASS параметров, перемещенных за аргумент, так как оно функционирует по-другому и делает деление также.

Пока в SASS:

@mixin columns($n...) {
   width:$n;
}

div{
   @include columns(1/4)
}

возврати:

div {
  width: 1/4;   
}

в Stylus:

columns(n...)
  width (n)

div
  columns(1/4)

возврати:

div {
  width: 0.25;
}

Какая-то идея о, поскольку было бы возможно получать?

6
задан 23.05.2017, 15:39
2 ответа

То, что ты хочешь, очень простое, ему удается, так как stylus он позволяет тебе называть mixin двух форм

mixin(arguments)

и

mixin arguments

Различие между обоими состоит в том, что первая форма оценивает выражение перед тем, как перемещать как аргументы и второй изюм выражение, не оценивая, как ты написал ее

Когда ты используешь mixins, ты можешь опускать полностью скобки, что могло бы давать тебе фантастическую опору для специфических свойств браузеров (vendor property)!

Ощутись, что (...) в нашем mixin к нему отнеслись как свойство и не перекурсивный призыв функции.

Если в твоем листе стилей

/* mixin */
columns(n...)
  width (n)

div
  columns(1/4)

произведи

div {
    width: 0.25;
}

Писать

div
  columns 1/4

он произведет

div {
    width: 1/4;
}

Ты можешь подтверждать это здесь используя онлайн инструмент самого stylus

Редактирование

Если кроме того, что ты получаешь часть, ты хочешь разложить ее в частях и включить больше аргументов в вызов ты можешь определять больше аргументов в заявлении mixin и rest params он возьмется за оставшуюся часть

/* mixin */
// (recomendado)
columns(numerador, simbolo, divisor, n...)
  width '%s%s%s' % numerador, simbolo, divisor

div
  columns 1/4;

Еще он произведет тот же вывод, ты можешь подтверждать это здесь

div {
    width: 1/4;
}

но сейчас ты имеешь numerador и divisor как независимые переменные (ты можешь использовать p чтобы показывать их в консоли) и в n оставшаяся часть аргументов.

Это понимает, что во вводе первый аргумент всегда - часть и интерпретирован из-за stylus следующей формы 1, / и 4 (именно поэтому ты нуждаешься в трех аргументах).

Для более сложных поступающих данных ты можешь использовать arguments и разлагать это в частях

/* mixin */
columns()
  // asumiendo que el primer argumento sea una fraccion
  fraccion = '' + arguments[0]
  parts = split(' / ', fraccion)
  numerador = unquote(parts[0])
  denominador = unquote(parts[1])
  width s('%s/%s', numerador, denominador)
  padding arguments[1]
  margin arguments[2]

div
  columns 1/4, 10px 10px, 20px 10px;

Он произведет этот вывод, который ты можешь проверять здесь

/* mixin */
div {
    width: 1/4;
    padding: 10px 10px;
    margin: 20px 10px;
}

Таким образом, ты можешь перемещать больше параметров твой mixin, чтобы реализовывать другие customizaciones.

6
ответ дан 24.11.2019, 12:55
  • 1
    Интересный, он я может быть и #250; til для каких-то вещей, но я думаю, что я сделал немного похоже, или по крайней мере нахожусь какие-то проблемы с этим м и # 233; все, кто уже intent и # 233; решать в Ваш d и # 237; в. С одной стороны у меня есть м и # 225; s пара и # 225; метры в mixin и с этим форматом ко мне приходят все вместе и я должен отделять их, чтобы обрабатывать информацию с ними и он достаточно обременительный, с другой стороны у меня есть различный синтаксис (вещь, что не quer и # 237; a), этот mixin идти и # 237; в без пары и # 233; ntesis пока dem и # 225; s, если они идут, и я нуждаюсь в них. 1/2 – blonfu 27.10.2016, 19:46
  • 2
    Также я не добиваюсь того, чтобы он сделал divisi и # 243; n, когда мне ни надо ни извлекать делитель (он f и # 225; cil, если это всегда число, но не, если он может меняться, хотя это не волнует меня много, быть и # 237; в редкий, у которого был м и # 225; s числа) 2/2 – blonfu 27.10.2016, 19:46
  • 3
    В любом случае не s и # 233; если habr и # 225; лучший способ делать то, что я хочу, ждать и # 233; немного перед тем, как принимать твой ответ посмотрим кто-то предлагает другой soluci и # 243; n, что убедил м и # 225; в. – blonfu 27.10.2016, 19:56
  • 4
    @blonfu быстрый Вопрос, сказанный mixin всегда tendr и # 225; fracci и # 243; n как первый аргумент или смоги быть произвольным вводом – devconcept 27.10.2016, 20:09
  • 5
    Всегда это fracci и # 243; n, значь, что он занимает x колонн общего количества y колонн: columns (1/4) - > 1 колонна 4; columns (2/3) - > две колонны 3 – blonfu 27.10.2016, 20:13

Здесь я прекращаю тебе форму извлекать 1 (числитель) и 4 (denominzador) части.

  • mixin должна быть названной без usuar скобка для того, чтобы параметры не были оценены (читать ответ @devconcept)
  • Переменная size es конвертируемая в string и разделенный (split) начиная с /
  • В переменной parts это будет список, который у него будет в положении 0 и 1, numerado и denominador части.
  • Мы используем функцию convert чтобы преобразовывать снова в numeros части части. Не делания этого, не смогут осуществляться математические операции с теми же самыми.
columns(size...)
  parts = split(' / ', '' + size)
  numerator = convert(parts[0])
  denominator = convert(parts[1])

  width size
  z-index: denominator * 2

div {
  columns 1/4
}

Это последует:

div {
  width: 1/4;
  z-index: 8;
}

Здесь demo

2
ответ дан 24.11.2019, 12:55
  • 1
    Спасибо, мне нравится твой способ это делать, я я hab и # 237; в сложный м и # 225; s, не я hab и # 237; в произошедший, что pod и # 237; чтобы превращать стоимость в string внутри самого funci и # 243; n split() – blonfu 27.10.2016, 19:49
  • 2
    Я обновляю мой ответ с изменением и descripci и # 243; n, из которого он делается в в mixim – Marcos 27.10.2016, 21:58
  • 3
    Происходит что-то дополнительное и # 241; или с твоим примером. Я делаю операции между numerator и denominator, все функционируют (он суммирует, он остается, multiplicaci и # 243; n) меньше divisi и # 243; n, я не понимаю porqu и # 233;. – blonfu 28.10.2016, 09:21
  • 4
    Решенный. Hab и # 237; которому помещать это между парой и # 233; ntesis – blonfu 28.10.2016, 09:35

Теги

Похожие вопросы