How to Use Variables in Property Names in LESS: Dynamic Properties or Property Name Interpolation?

Using Variables in Property Names in LESS (Dynamic Properties / Property Name Interpolation)

When working with LESS, customizing CSS property names based on dynamic values can be a challenge. This question explores the limitations and workarounds for replicating a vendor-specific CSS mixin that accepts dynamic properties and values. In Sass, such a mixin would utilize property name interpolation.

Limitation in LESS:

Currently, LESS lacks built-in support for dynamic property name generation. This makes it impossible to replicate the vendor prefix mixin directly in LESS.

Workarounds:

Despite this limitation, the following workarounds offer alternative methods:

1. Inject Dynamically Generated Properties into Property Values:

Wrap dynamic properties and values into a generic property, such as "vendor," and inject them into the value of another property.

Example:

.vendors(@property, @value) {
  -inj: "~"@{property}: @{value}"";
}

.test {
  .vendors(transform, matrix(1, 0, 0, 1, 20, 20));
}

2. Inject Dynamically Generated Properties into the Name of the Following Class:

Extend the vendor mixin concept. Create multiple classes where the later classes inject vendor rules into their names.

Example:

.vendors(@property, @value, @rest: """") {
  @inject: "~"@{rest} -webkit-@{property}: @{value}; -moz-@{property}: @{value}; -ms-@{property}: @{value}; -o-@{property}: @{value}; @{property}: @{value}"";
}

.test(@nextclass) {
  .vendors(transform, "matrix(2, 0, 0, 2, 20, 20)");
  .vendors(transform-origin, "10px 10px", @inject);
  (~"{@{inject}} .@{nextclass}"): {};
}

.this-class {
  .test(next-class);
}

Upgraded Workaround for LESS v1.4.0:

@nl: `"\n\t"`;
.multi(@props, @vals, @i, @inj) {
  // extract property and value from lists
  @property: extract(@props, 1);
  @value: extract(@vals, 1);

The above is the detailed content of How to Use Variables in Property Names in LESS: Dynamic Properties or Property Name Interpolation?. For more information, please follow other related articles on the PHP Chinese website!