如何用Less编写并优化精简以下边框样式代码？

Hey there! Let's refactor your border styles into clean, maintainable Less code that cuts down on repetition while preserving all your original functionality. Here are two optimized approaches you can use:

Approach 1: Parameterized Mixins (Intuitive & Straightforward) #

This method uses a reusable mixin to handle all border variations, making it easy to tweak styles later:

// Define base border properties in one place for easy updates
@border-base: solid 1px;

// Reusable mixin that accepts a side parameter
.border(@side: all) {
  // Apply full border when no side is specified
  & when (@side = all) {
    border: @border-base;
  }
  // Apply border to specific side(s)
  & when (@side = top), (@side = left), (@side = bottom), (@side = right) {
    border-@{side}: @border-base;
  }
}

// Generate your border classes by calling the mixin
.border { .border(); }
.border-top { .border(top); }
.border-left { .border(left); }
.border-bottom { .border(bottom); }
.border-right { .border(right); }

// Special override classes (these are exceptions to the base style)
.border-color-inherit {
  border-color: inherit !important;
}

.border-none {
  border: none !important;
}

Approach 2: Loop-Generated Classes (Even More Streamlined) #

If you want to eliminate duplicate calls to the mixin, use a Less loop to generate all directional border classes automatically:

// Base border style (update once to change all borders)
@border-base: solid 1px;
// List of border sides to generate classes for
@border-sides: top, left, bottom, right;

// Core border mixin
.border(@side: all) {
  & when (@side = all) {
    border: @border-base;
  }
  & when not (@side = all) {
    border-@{side}: @border-base;
  }
}

// Base border class
.border { .border(); }

// Loop to generate all directional border classes
.generate-border-sides(@index: 1) when (@index <= length(@border-sides)) {
  @current-side: extract(@border-sides, @index);
  .border-@{current-side} {
    .border(@current-side);
  }
  .generate-border-sides(@index + 1);
}
// Initiate the loop
.generate-border-sides();

// Special override classes
.border-color-inherit { border-color: inherit !important; }
.border-none { border: none !important; }

Why This Works #

• Single Source of Truth: The @border-base variable lets you update border width/style in one place (e.g., change solid 1px to dashed 2px without editing every class).
• Reduced Repetition: Both approaches avoid copying the same solid 1px value across multiple classes.
• Maintainable: Adding/removing border sides only requires updating the list in Approach 2, or adding a new mixin call in Approach 1.

When compiled, both versions will output exactly the CSS you started with—so your functionality stays intact, but your Less code is far cleaner!

内容的提问来源于stack exchange，提问作者Goffer