如何用 LESS 声明变量列表？

Question

我正在尝试将以下 SASS 文件翻译成 LESS。下面的代码是SASS文件的一部分。

.btn-border-o {
    background-color: transparent;
    border: 1px solid #d0d0d0;
    color: #B8B8B8;

    &:before {
        width: 0;
        height: 100%;
        border-width: 1px 0 1px 0;
        top: -1px;
        left: 0;
        transition-delay: 0.05s;
    }

    &:after {
        width: 100%;
        height: 0;
        border-width: 0 1px 0 1px;
        top: 0;
        left: -1px;
    }

    @each $name,$hex in $btn-colors {

        &.btn-#{$name} {

            &:before,
            &:after {
                border-color: #{$hex};
            }

            &:hover {
                color: #{$hex};
            }
        }
    }
}

SASS 允许像制作字典一样制作变量列表。喜欢：

$btn-colors: (
    "green": "#2ecc71",
    "blue": "#3498db",
    "purple": "#9b59b6",
    "navy": "#34495e",
    "orange": "#e67e22",
    "red": "#e74c3c"
);

因此它允许基于此制作循环。 但是，我很难找到任何关于为 LESS 制作变量列表的文档。

如果没有，我想知道如何根据上面的代码示例过渡到 LESS。

Answer 1

现在你可以这样做了 https://lesscss.org/features/#maps-feature

@sizes: {
  mobile: 320px;
  tablet: 768px;
  desktop: 1024px;
}

.navbar {
  display: block;

  @media (min-width: @sizes[tablet]) {
    display: inline-block;
  }
}

输出：

.navbar {
  display: block;
}
@media (min-width: 768px) {
  .navbar {
    display: inline-block;
      

}
}