// see: https://github.com/less/less.js/issues/3368
@vars: {
  background-color: black;
  color: contrast($background-color, #000, #fff);
}
  
:root {
  each(@vars, {
    --@{key}: @value;
  });
}

div {
  display: inline-block;
  padding: 1rem;
  background-color: var(--background-color);
  color: var(--color);
}

// see: https://github.com/less/less.js/issues/3339
// still fails - move to 4.0
// @components: {
//   columns: true;
//   ratios: false;
// };

// each(@components, {
//   & when (@value = true) {
//       @import (optional) "components/@{key}.less";
//   }
// });