Question

我想使用Less来创建一些仅在给定的时间间隔内有效的CSS代码。

我想像这样创建一个mixin

.showFromTo (@from, @to) when (`new Date().getTime() >= @from && new Date().getTime() <= @to`) {
    width: 100px; //for example
}

然后或多或少地使用它：

.myClass { .showFromTo(`new Date(2014, 01, 02).getTime`, `new Date(2014, 01, 05).getTime()`) }

因为它不起作用......任何人都可以给我一些帮助吗？

Answer 1

几件事

传递javascript日期信息January is considered 0 and December 11，因此您需要对此进行说明。
正如Stephen Thomas所说，我认为他是正确的，不允许在守卫中使用javascript表达式，因此javascript评估必须在警卫评估之前进行。

解决方案

以下两种情况都可以正常运作：

<强> LESS

.showFromTo (@startYear, @startMonth, @startDay, @endYear, @endMonth, @endDay) {
  @currentTime: `new Date().getTime()`;
  @start: `new Date(@{startYear}, @{startMonth} - 1, @{startDay}).getTime()`;
  @end: `new Date(@{endYear}, @{endMonth} - 1, @{endDay}).getTime()`;
  @displayCheck: `@{currentTime} >= @{start} && @{currentTime} <= @{end} ? true : false`;
  .display() when (@displayCheck = true) {
    width: 100px; //for example
  }
  .display();
}

.myClass {
  .showFromTo(2014, 1, 1, 2014, 12, 31); //displays if in 2014
}
.myClass2 {
  .showFromTo(2013, 1, 1, 2013, 12, 31); //does not display since we are past 2013
}

CSS输出（2014年）

.myClass {
  width: 100px;
}

Answer 2

感谢ScottS的回答。我这样解决了：

@todayTs: `new Date().getTime()`;
.showFromTo (@fromTs, @toTs) when (@fromTs =< @todayTs) and (@todayTs =<  @toTs) {
    //style
}

用

调用

.myClass {
    .showFromTo(`new Date(2014, 00, 03).getTime()`, `new Date(2014, 00, 09).getTime()`);
}

通过这种方式比较更容易，但您需要以更复杂的格式传递参数

日期条件较少css

2 个答案:

几件事

解决方案