如何在LESS/JavaScript中按条件分组通用CSS规则？按钮样式重构求助

Absolutely! You can totally abstract that shared button logic and base styles into a single LESS rule to eliminate redundant code—let’s walk through how to do this cleanly.

Step 1: Extract Base Button Styles #

First, create a base rule that holds all your shared button properties (padding, border, typography, transitions, etc.). This way, you don’t repeat these styles across multiple button variants.

Step 2: Embed Conditional Layout Logic #

Use LESS’s parent selector (&) to tie the button’s layout behavior to the parent container’s show-footer state. This keeps all the conditional logic tied directly to the base button styles, so you don’t have to duplicate it for each button variant.

Here’s a complete example:

// Base button: all shared styles + conditional layout logic
.base-button {
  // Universal button properties (move all your common styles here!)
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;

  // Layout when show-footer is TRUE (side-by-side buttons)
  .show-footer & {
    width: auto;
    flex: 1; // Makes buttons equal width in the row
    margin-right: 0.5rem;

    // Remove margin from the last button to avoid extra spacing
    &:last-child {
      margin-right: 0;
    }
  }

  // Layout when show-footer is FALSE (single full-width button)
  :not(.show-footer) & {
    width: 100%;
  }
}

// Button Variant 1: Primary (only add unique styles here)
.primary-button {
  @extend .base-button;
  background-color: #2563eb;
  color: white;

  &:hover {
    background-color: #1d4ed8;
  }
}

// Button Variant 2: Secondary (only add unique styles here)
.secondary-button {
  @extend .base-button;
  background-color: #6b7280;
  color: white;

  &:hover {
    background-color: #4b5563;
  }
}

How to Use This with Your Framework #

If you’re using a framework like Vue or React, just bind the show-footer class to your button container:

<!-- Vue example -->
<div :class="{ 'show-footer': showFooter }">
  <button class="primary-button">Save</button>
  <button class="secondary-button">Cancel</button>
</div>

<!-- React example -->
<div className={`${showFooter ? 'show-footer' : ''}`}>
  <button className="primary-button">Save</button>
  <button className="secondary-button">Cancel</button>
</div>

Bonus: Clean Up Container Layout #

For even cleaner code, you can handle the flex layout in the container rule instead of the button:

.button-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;

  // Switch to row layout when show-footer is true
  &.show-footer {
    flex-direction: row;
  }

  .base-button {
    // Base styles here...
    width: 100%;

    .show-footer & {
      width: auto;
      flex: 1;
    }
  }
}

Why This Works #

• No repetition: All shared styles live in one place, so updating padding, border-radius, etc., only requires one change.
• Centralized logic: The conditional layout rules are tied directly to the base button, so you don’t have to write separate media queries or class overrides for each variant.
• Scalable: Add new button variants in seconds by just extending .base-button and adding unique styles.

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