使用LESS在关键帧名称中添加特殊字符

时间:2017-01-27 11:51:26

标签: css less

我尝试用更少的关键帧生成关键帧。这是我的代码,包含结果和预期输出。 我搜索了如何在变量中添加特殊字符,但无法找到解决此问题的方法。

任何人都可以告诉0'%'可以转换为0%(其他百分比值相同)

@keyframes spin{
@sign:'%';
.rotate(0,0,90,25);
.rotate(@percent:0, @deg:0,@degDiff, @percentDiff) when (@percent <= 100) {
  @{percent}@{sign}   {
        transform: rotate(@deg deg);
    }
    .rotate(@percent+@percentDiff, @deg+@degDiff, @degDiff, @percentDiff);
}
}

输出

@keyframes spin {
  0'%' {
    transform: rotate(0 deg);
  }
  25'%' {
    transform: rotate(90 deg);
  }
  50'%' {
    transform: rotate(180 deg);
  }
  75'%' {
    transform: rotate(270 deg);
  }
  100'%' {
    transform: rotate(360 deg);
  }
}

预期结果

@keyframes spin {
  0% {
    transform: rotate(0 deg);
  }
  25% {
    transform: rotate(90 deg);
  }
  50% {
    transform: rotate(180 deg);
  }
  75% {
    transform: rotate(270 deg);
  }
  100% {
    transform: rotate(360 deg);
  }
}

0 个答案:

没有答案