how do i declare list of variables with LESS?

Question

I am trying to translate the following SASS file to LESS. The code below is the part of SASS file.

.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};
            }
        }
    }
}

The SASS allows to make list of variables as if making dictionary. Like:

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

So it allows to make loops based on that. However, I am having hard time finding any documentation regarding making list of variables for LESS.

If there is none, I want to know how to make that transition to LESS based on the code example above.

You can make an associative array like in [this answer](http://stackoverflow.com/questions/30207980/less-associative-array-in-loop/30209802#30209802) and use loops. — Harry, May 15 '15 at 15:06
[Here](http://codepen.io/hari_shanx/pen/MwKqBm) is an implementation in Less. Not posting an answer as it would look like a duplicate of the other. Hope you find this helpful. — Harry, May 15 '15 at 15:14
possible duplicate of [Loop over an array of name value pairs in LESS](http://stackoverflow.com/questions/23658087/loop-over-an-array-of-name-value-pairs-in-less) — seven-phases-max, May 15 '15 at 16:17

score 0 · Answer 1 · answered Mar 03 '23 at 21:18

now u can do like this https://lesscss.org/features/#maps-feature

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

.navbar {
  display: block;

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

Outputs:

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

}
}

how do i declare list of variables with LESS?

1 Answers1