Lesscss - когда у числа нет единиц

Как проверить, нет ли в числе единицы с меньшим числом? Должен быть путь короче, чем:

.margin(@i) when (isnumber(@i)) and not (ispixel(@i)) and not (ispercentage(@i)) and not (isem(@i)) and not (isunit(@i,rem)) and not (@i = auto) {
  ...
}

Я думал when not (isunit(@i)) поможет, но это не работает ...

Моя цель - использовать единицы измерения по умолчанию и как можно больше работать с функциями без единиц измерения, такими как ".font-size (10)". Единица измерения по умолчанию должна использоваться только тогда, когда значение не имеет единицы измерения, если она имеет такую ​​единицу, как ".font-size (2em)", значение сохраняет свою единицу. Когда единица измерения по умолчанию - rem или rem используется как единица, функция должна добавить значение пикселя перед свойством rem (старые браузеры) и вычислить значение rem:

".font-size (5)" должен выводить: (когда @ default-unit: rem)

font-size: 5px;
font-size: 0.5em;

У меня это полностью работает со следующими функциями:

.font-size(@i) when (isunit(@i,rem)) {
  font-size: unit(@i*10,px);
  font-size: @i;
}

.font-size(@i) when (ispixel(@i)), (ispercentage(@i)), (isem(@i)), (@i = auto) and not (isunit(@i,rem)) and not (@i = n) {
  font-size: @i;
}

.font-size(@i) when not (ispixel(@i)) and not (ispercentage(@i)) and not (isem(@i)) and not (isunit(@i,rem)) and not (@i = auto) and (@unit = rem) and not (@i = n) {
  font-size: unit(@i,px);
  font-size: unit(@i/10,rem);
}

.font-size(@i) when not (ispixel(@i)) and not (ispercentage(@i)) and not (isem(@i)) and not (isunit(@i,rem)) and not (@i = auto) and not (@unit = rem) and not (@i = n) {
  font-size: unit(@i,px);
}

Кажется, это слишком для того, чего я хочу достичь ... неужели это может быть короче?

Изменить: ответ Скоттса - это именно то, что я искал, теперь, когда я не хочу использовать 4 значения, такие как ".margin (5,10,0,8px)", я называю 4 необходимых functions: .margin-top (), .margin-right (), ... "Это работает так, как должно, но визуализированный css довольно длинный ... Мне было интересно, как лучше всего отобразить сокращение css: "margin: 0.5rem, 1rem, 0,8px;". Используя функцию Скотта, я попытался сделать пример для двух значений:

.background-position(@x,@y) {

  .runChecksx() when not (isnumber(@x)) {
    @baseOutputx: @x;
  }
  .runChecksx() when (isnumber(@x)) {
    @tempbaseOutputx: (@x * unit(1, @unit));
    @passedRemx: isunit(@x, 'rem');
    .checkRemx() when not (isunit(@tempbaseOutputx, 'rem')) and not (@passedRemx) {
      @baseOutputx: (@x * unit(1, @unit));
    }
    .checkRemx() when (isunit(@tempbaseOutputx, 'rem')), (@passedRemx) {
      @remBaseAdjx: unit(`(('@{unit}' == 'rem' & @{passedRemx} == true) ? 1 : 0.1)`);
      @baseOutputx: unit((@x * @remBaseAdjx), rem);
    }
    .checkRemx();
  }


  .runChecksy() when not (isnumber(@y)) {
    @baseOutputy: @y;
  }
  .runChecksy() when (isnumber(@y)) {
    @tempbaseOutputy: (@y * unit(1, @unit));
    @passedRemy: isunit(@y, 'rem');
    .checkRemy() when not (isunit(@tempbaseOutputy, 'rem')) and not (@passedRemy) {
      @baseOutputy: (@y * unit(1, @unit));
    }
    .checkRemy() when (isunit(@tempbaseOutputy, 'rem')), (@passedRemy) {
      @remBaseAdjy: unit(`(('@{unit}' == 'rem' & @{passedRemy} == true) ? 1 : 0.1)`);
      @baseOutputy: unit((@y * @remBaseAdjy), rem);
    }
    .checkRemy();
  }


  .runChecksx();
  .runChecksy();


  .checkFallback() when (isunit(@baseOutputx,rem)) and (isunit(@baseOutputy,rem)) {
      background-position: @baseOutputx*10px @baseOutputy*10px;
  }
  .checkFallback() when (isunit(@baseOutputx,rem)) and not (isunit(@baseOutputy,rem)) {
      background-position: @baseOutputx*10px @baseOutputy;
  }
  .checkFallback() when not (isunit(@baseOutputx,rem)) and (isunit(@baseOutputy,rem)) {
      background-position: @baseOutputx @baseOutputy*10px;
  }
  .checkFallback() when not (isunit(@baseOutputx,rem)) and not (isunit(@baseOutputy,rem)) { }

  .checkFallback();

  background-position: @baseOutputx @baseOutputy;
}

Использование 4 значений сделает эту функцию намного более простой, есть ли лучшие способы?


javascript css less
person user2606129    schedule 22.07.2013    source источник
comment
Я не уверен, что для этого есть простой ответ от LESS, но у меня есть вопрос, что вы конкретно хотите делать с этой информацией. Вы пытаетесь добавить единицу измерения, но только если переданное значение является числом, но без собственной единицы?   -  person ScottS    schedule 22.07.2013
comment
isunit не работает так, как вы хотите, потому что для него требуется второй аргумент, определяющий конкретную единицу.   -  person Martin Turjak    schedule 22.07.2013
comment
Отредактировал свой пост, чтобы прояснить, чего я хочу достичь ...   -  person user2606129    schedule 22.07.2013

Ответы (1)


arrow_upward
5
arrow_downward

Обновление: размер шрифта

Возможно, в будущем это удастся кое-что сократить, но определенно есть ошибка в отношении значений rem, которую необходимо проработать в текущей (1.4.1) версии LESS. Есть еще немало кода, но все остается в исходном вызове миксина.

МЕНЬШЕ (тестовый пример с установленной единицей измерения по умолчанию rem)

@defaultUnit: rem;

.setFontSize(@i) {
  .runChecks() when not (isnumber(@i)) {
    @baseOutput: @i;
  }
  .runChecks() when (isnumber(@i)) {
    @tempBaseOutput: (@i * unit(1, @defaultUnit));
    @passedRem: isunit(@i, 'rem'); //a bug with rem required this extra step
    .checkRem() when not (isunit(@tempBaseOutput, 'rem')) and not (@passedRem) {
      //keeps passed in non-rem unit or sets to default when non rem
      @baseOutput: (@i * unit(1, @defaultUnit));
    }
    .checkRem() when (isunit(@tempBaseOutput, 'rem')), (@passedRem) {
      //keeps passed in rem unit and value 
      //or sets to a default rem unit but uses passed value for px value 
      @remBaseAdj: unit(`(('@{defaultUnit}' == 'rem' & @{passedRem} == true) ? 1 : 0.1)`);
      @baseOutput: unit((@i * @remBaseAdj), rem);
      font-size: unit(@i, px) * (10 * @remBaseAdj); 
    }
    .checkRem();
  }

  .runChecks();
  font-size: @baseOutput;
}

.test1 {
  .setFontSize(5);
}
.test2 {
  .setFontSize(5rem);
}
.test3 {
  .setFontSize(5px);
}
.test4 {
  .setFontSize(5%);
}
.test5 {
  .setFontSize(5em);
}
.test6 {
  .setFontSize(inherit);
}

Вывод CSS

.test1 { /* i.e. unitless 5 with rem default unit */
  font-size: 5px;
  font-size: 0.5rem;
}
.test2 { /* i.e. passed in rem value */
  font-size: 50px;
  font-size: 5rem;
}
.test3 {
  font-size: 5px;
}
.test4 {
  font-size: 5%;
}
.test5 {
  font-size: 5em;
}
.test6 { /* any string */
  font-size: inherit;
}
person ScottS    schedule 22.07.2013
comment
Спасибо! Возможно, в будущем мы сможем использовать переменную как свойство, например setSize (margin-left, 10); - person user2606129; 22.07.2013