更少的CSS中的日期条件

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

几件事

1. 传递javascript日期信息时， 一月被认为是0和12月11 ，因此您需要考虑这一点。
2. 正如斯蒂芬·托马斯（Stephen Thomas）所指出的，我认为他是正确的，在警卫中不允许使用javascript表达式，因此javascript评估必须在警卫评估之前进行。

一个解法

以下说明了这两种情况，并且似乎可以正常运行：

减

.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()`);
}

这样比较起来比较容易，但是您需要以更复杂的格式传递参数