Less Twitter bootstrap 3自定义多主题'；s

我有一个多领域的网页设计。每个区域都有自己的风格，第一区域的原色是红色，第二区域的原色是黑色，等等。我正在使用less，那里你有主题。less几乎完全符合我的需要。问题是这个主题改变了Bootstrap2中的网站外观。bootstrap 3是否有主题.less

我有一个解决方案，就是用一个特定的变量生成多个引导文件。更少，在主体上有一个特定的id，但是我有一个5倍多的代码，仅用于颜色更改

基本上我只想改变@brand primary:#992b9d；在变量中为0.less。但是很多文件/变量都在使用这个变量，我想为浏览器提供纯css

---

可能是生成多个bootstrap.css的最佳/唯一方法。

因为您提到@brand primary，我为此编写了一个示例

首先，我查找@brand primary的所有用法

./type.less:  color: @brand-primary;
./type.less:    color: darken(@brand-primary, 10%);
./variables.less:@brand-primary:               #428bca;
./variables.less:@link-color:                  @brand-primary;
./variables.less:@component-active-bg:         @brand-primary;
./variables.less:@btn-primary-bg:              @brand-primary;
./variables.less:@pagination-active-bg:        @brand-primary;
./variables.less:@label-primary-bg:            @brand-primary;
./variables.less:@progress-bar-bg:             @brand-primary;
./variables.less:@panel-primary-border:        @brand-primary;
./variables.less:@panel-primary-heading-bg:    @brand-primary;

@将此部分复制到新的less文件brand-primary.less后，brand primary将仅用于type.less中：

.red-area
{
    //type.less
    .text-primary {
      color: @brand-primary-red;
      &:hover {
        color: darken(@brand-primary-red, 10%);
      }
    }
}

我再次将带有@link color的规则从不同的文件复制到brand-primary.less，并将@link color重命名为@link color red。我复制了@link hover color，因为这是由

@link hover color:darken（@link color，15%）定义的在variables.less中

是的，你是对的，这会影响很多风格，而且会很复杂。例如，@component active bg将不用于直接设置任何样式@组件活动bg在variables.less中定义@dropdown link active bg、@nav pills active link hover bg和@list group active bg的值

您必须对基于品牌的每个变量重复此操作

./type.less:  color: @brand-primary;
./type.less:    color: darken(@brand-primary, 10%);
./variables.less:@brand-primary:               #428bca;
./variables.less:@link-color:                  @brand-primary;
./variables.less:@component-active-bg:         @brand-primary;
./variables.less:@btn-primary-bg:              @brand-primary;
./variables.less:@pagination-active-bg:        @brand-primary;
./variables.less:@label-primary-bg:            @brand-primary;
./variables.less:@progress-bar-bg:             @brand-primary;
./variables.less:@panel-primary-border:        @brand-primary;
./variables.less:@panel-primary-heading-bg:    @brand-primary;

在某些情况下，例如缩略图中的@link color.less，您只需复制较小的部分，如：

.red-area
{
    .thumbnail {
    // Add a hover state for linked versions only
      a&:hover,
      a&:focus,
      a&.active {
        border-color: @link-color-red;
      }
      }
}

在其他情况下，扩展可以帮助您减少要复制的代码，请参阅：

执行此操作后，最终的less文件将如下所示：

//
// Load core variables and mixins
// --------------------------------------------------

@import "variables.less";
@import "mixins.less";

@brand-primary-red:                     #ff0000;
@link-color-red:                        @brand-primary-red;
@link-hover-color-red:                  darken(@link-color-red, 15%);
@component-active-bg-red:               @brand-primary-red;
@dropdown-link-active-bg-red:           @component-active-bg-red;
@nav-pills-active-link-hover-bg-red:    @component-active-bg-red;
@list-group-active-bg-red:              @component-active-bg-red;
@list-group-active-border-red:          @list-group-active-bg-red;
@btn-primary-bg-red:                    @brand-primary-red;
    @btn-primary-border-red:                darken(@btn-primary-bg-red, 5%);
@pagination-active-bg-red:              @brand-primary-red;
@label-primary-bg-red:                  @brand-primary-red;
@progress-bar-bg-red:                   @brand-primary-red;
@panel-primary-border-red:              @brand-primary-red;
@panel-primary-heading-bg-red:          @brand-primary-red;

.red-area
{
    //type.less
    .text-primary {
      color: @brand-primary-red;
      &:hover {
        color: darken(@brand-primary-red, 10%);
      }
    }

    //scaffolding.less
    // Links

    a {
      color: @link-color-red;
      text-decoration: none;

      &:hover,
      &:focus {
        color: @link-hover-color-red;
        text-decoration: underline;
      }

      &:focus {
        .tab-focus();
      }
    }

    //thumbnails.less

    .thumbnail {
    // Add a hover state for linked versions only
      a&:hover,
      a&:focus,
      a&.active {
        border-color: @link-color-red;
      }
      }

    //buttons.less
    // Make a button look and behave like a link
    .btn-link {
      color: @link-color-red;
      font-weight: normal;
      cursor: pointer;
      border-radius: 0;

      &,
      &:active,
      &[disabled],
      fieldset[disabled] & {
        background-color: transparent;
        .box-shadow(none);
      }
      &,
      &:hover,
      &:focus,
      &:active {
        border-color: transparent;
      }
      &:hover,
      &:focus {
        color: @link-hover-color-red;
        text-decoration: underline;
        background-color: transparent;
      }
      &[disabled],
      fieldset[disabled] & {
        &:hover,
        &:focus {
          color: @btn-link-disabled-color;
          text-decoration: none;
        }
      }
    }

    //nav.less
      // Open dropdowns
      .open > a {
        &,
        &:hover,
        &:focus {
          background-color: @nav-link-hover-bg;
          border-color: @link-color-red;

          .caret {
            border-top-color: @link-hover-color-red;
            border-bottom-color: @link-hover-color-red;
          }
        }
      }

    //dropdowns.less
    // Active state
    .dropdown-menu > .active > a {
      &,
      &:hover,
      &:focus {
        color: @dropdown-link-active-color;
        text-decoration: none;
        outline: 0;
        background-color: @dropdown-link-active-bg-red;
      }
    }

    //nav.less
        .nav-pills {
      > li {
        float: left;

        // Links rendered as pills
        > a {
          border-radius: @nav-pills-border-radius;
        }
        + li {
          margin-left: 2px;
        }

        // Active state
        &.active > a {
          &,
          &:hover,
          &:focus {
            color: @nav-pills-active-link-hover-color;
            background-color: @nav-pills-active-link-hover-bg-red;

            .caret {
              border-top-color: @nav-pills-active-link-hover-color;
              border-bottom-color: @nav-pills-active-link-hover-color;
            }
          }
        }
      }
    }

    //list-group.less
    // Linked list items
    a.list-group-item {
      color: @list-group-link-color;

      .list-group-item-heading {
        color: @list-group-link-heading-color;
      }

      // Hover state
      &:hover,
      &:focus {
        text-decoration: none;
        background-color: @list-group-hover-bg;
      }

      // Active class on item itself, not parent
      &.active,
      &.active:hover,
      &.active:focus {
        z-index: 2; // Place active items above their siblings for proper border styling
        color: @list-group-active-color;
        background-color: @list-group-active-bg-red;
        border-color: @list-group-active-border-red;

        // Force color to inherit for custom content
        .list-group-item-heading {
          color: inherit;
        }
        .list-group-item-text {
          color: lighten(@list-group-active-bg, 40%);
        }
      }
    }

    //buttons.less
    .btn-primary {
      .button-variant(@btn-primary-color; @btn-primary-bg-red; @btn-primary-border-red);
    }

    //pagination.less
    .pagination {
      display: inline-block;
      padding-left: 0;
      margin: @line-height-computed 0;
      border-radius: @border-radius-base;

      > li {
        display: inline; // Remove list-style and block-level defaults
        > a,
        > span {
          position: relative;
          float: left; // Collapse white-space
          padding: @padding-base-vertical @padding-base-horizontal;
          line-height: @line-height-base;
          text-decoration: none;
          background-color: @pagination-bg;
          border: 1px solid @pagination-border;
          margin-left: -1px;
        }
        &:first-child {
          > a,
          > span {
            margin-left: 0;
            .border-left-radius(@border-radius-base);
          }
        }
        &:last-child {
          > a,
          > span {
            .border-right-radius(@border-radius-base);
          }
        }
      }

      > li > a,
      > li > span {
        &:hover,
        &:focus {
          background-color: @pagination-hover-bg;
        }
      }

      > .active > a,
      > .active > span {
        &,
        &:hover,
        &:focus {
          z-index: 2;
          color: @pagination-active-color;
          background-color: @pagination-active-bg-red;
          border-color: @pagination-active-bg-red;
          cursor: default;
        }
      }

      > .disabled {
        > span,
        > span:hover,
        > span:focus,
        > a,
        > a:hover,
        > a:focus {
          color: @pagination-disabled-color;
          background-color: @pagination-bg;
          border-color: @pagination-border;
          cursor: not-allowed;
        }
      }
    }

    //labels.less

    .label-primary {
      .label-variant(@label-primary-bg-red);
    }

    //progress-bars.less
    // Bar of progress
    .progress-bar {
      background-color: @progress-bar-bg-red;
    }

    //panels.less

    .panel-primary {
      .panel-variant(@panel-primary-border-red; @panel-primary-text; @panel-primary-heading-bg-red; @panel-primary-border-red);
    }

}

您可以像theme.less一样编译此文件，或者删除导入并将其导入boostrap.less中

最终的css将如下所示：

.red-area .text-primary {
  color: #ff0000;
}
.red-area .text-primary:hover {
  color: #cc0000;
}
.red-area a {
  color: #ff0000;
  text-decoration: none;
}
.red-area a:hover,
.red-area a:focus {
  color: #b30000;
  text-decoration: underline;
}
.red-area a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
a.red-area .thumbnail:hover,
a.red-area .thumbnail:focus,
a.red-area .thumbnail.active {
  border-color: #ff0000;
}
.red-area .btn-link {
  color: #ff0000;
  font-weight: normal;
  cursor: pointer;
  border-radius: 0;
}
.red-area .btn-link,
.red-area .btn-link:active,
.red-area .btn-link[disabled],
fieldset[disabled] .red-area .btn-link {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.red-area .btn-link,
.red-area .btn-link:hover,
.red-area .btn-link:focus,
.red-area .btn-link:active {
  border-color: transparent;
}
.red-area .btn-link:hover,
.red-area .btn-link:focus {
  color: #b30000;
  text-decoration: underline;
  background-color: transparent;
}
.red-area .btn-link[disabled]:hover,
fieldset[disabled] .red-area .btn-link:hover,
.red-area .btn-link[disabled]:focus,
fieldset[disabled] .red-area .btn-link:focus {
  color: #999999;
  text-decoration: none;
}
.red-area .open > a,
.red-area .open > a:hover,
.red-area .open > a:focus {
  background-color: #eeeeee;
  border-color: #ff0000;
}
.red-area .open > a .caret,
.red-area .open > a:hover .caret,
.red-area .open > a:focus .caret {
  border-top-color: #b30000;
  border-bottom-color: #b30000;
}
.red-area .dropdown-menu > .active > a,
.red-area .dropdown-menu > .active > a:hover,
.red-area .dropdown-menu > .active > a:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #ff0000;
}
.red-area .nav-pills > li {
  float: left;
}
.red-area .nav-pills > li > a {
  border-radius: 4px;
}
.red-area .nav-pills > li + li {
  margin-left: 2px;
}
.red-area .nav-pills > li.active > a,
.red-area .nav-pills > li.active > a:hover,
.red-area .nav-pills > li.active > a:focus {
  color: #ffffff;
  background-color: #ff0000;
}
.red-area .nav-pills > li.active > a .caret,
.red-area .nav-pills > li.active > a:hover .caret,
.red-area .nav-pills > li.active > a:focus .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}
.red-area a.list-group-item {
  color: #555555;
}
.red-area a.list-group-item .list-group-item-heading {
  color: #333333;
}
.red-area a.list-group-item:hover,
.red-area a.list-group-item:focus {
  text-decoration: none;
  background-color: #f5f5f5;
}
.red-area a.list-group-item.active,
.red-area a.list-group-item.active:hover,
.red-area a.list-group-item.active:focus {
  z-index: 2;
  color: #ffffff;
  background-color: #ff0000;
  border-color: #ff0000;
}
.red-area a.list-group-item.active .list-group-item-heading,
.red-area a.list-group-item.active:hover .list-group-item-heading,
.red-area a.list-group-item.active:focus .list-group-item-heading {
  color: inherit;
}
.red-area a.list-group-item.active .list-group-item-text,
.red-area a.list-group-item.active:hover .list-group-item-text,
.red-area a.list-group-item.active:focus .list-group-item-text {
  color: #e1edf7;
}
.red-area .btn-primary {
  color: #ffffff;
  background-color: #ff0000;
  border-color: #357ebd;
}
.red-area .btn-primary:hover,
.red-area .btn-primary:focus,
.red-area .btn-primary:active,
.red-area .btn-primary.active,
.open .dropdown-toggle.red-area .btn-primary {
  color: #ffffff;
  background-color: #d60000;
  border-color: #285e8e;
}
.red-area .btn-primary:active,
.red-area .btn-primary.active,
.open .dropdown-toggle.red-area .btn-primary {
  background-image: none;
}
.red-area .btn-primary.disabled,
.red-area .btn-primary[disabled],
fieldset[disabled] .red-area .btn-primary,
.red-area .btn-primary.disabled:hover,
.red-area .btn-primary[disabled]:hover,
fieldset[disabled] .red-area .btn-primary:hover,
.red-area .btn-primary.disabled:focus,
.red-area .btn-primary[disabled]:focus,
fieldset[disabled] .red-area .btn-primary:focus,
.red-area .btn-primary.disabled:active,
.red-area .btn-primary[disabled]:active,
fieldset[disabled] .red-area .btn-primary:active,
.red-area .btn-primary.disabled.active,
.red-area .btn-primary[disabled].active,
fieldset[disabled] .red-area .btn-primary.active {
  background-color: #ff0000;
  border-color: #357ebd;
}
.red-area .pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.red-area .pagination > li {
  display: inline;
}
.red-area .pagination > li > a,
.red-area .pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  line-height: 1.428571429;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  margin-left: -1px;
}
.red-area .pagination > li:first-child > a,
.red-area .pagination > li:first-child > span {
  margin-left: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.red-area .pagination > li:last-child > a,
.red-area .pagination > li:last-child > span {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.red-area .pagination > li > a:hover,
.red-area .pagination > li > span:hover,
.red-area .pagination > li > a:focus,
.red-area .pagination > li > span:focus {
  background-color: #eeeeee;
}
.red-area .pagination > .active > a,
.red-area .pagination > .active > span,
.red-area .pagination > .active > a:hover,
.red-area .pagination > .active > span:hover,
.red-area .pagination > .active > a:focus,
.red-area .pagination > .active > span:focus {
  z-index: 2;
  color: #ffffff;
  background-color: #ff0000;
  border-color: #ff0000;
  cursor: default;
}
.red-area .pagination > .disabled > span,
.red-area .pagination > .disabled > span:hover,
.red-area .pagination > .disabled > span:focus,
.red-area .pagination > .disabled > a,
.red-area .pagination > .disabled > a:hover,
.red-area .pagination > .disabled > a:focus {
  color: #999999;
  background-color: #ffffff;
  border-color: #dddddd;
  cursor: not-allowed;
}
.red-area .label-primary {
  background-color: #ff0000;
}
.red-area .label-primary[href]:hover,
.red-area .label-primary[href]:focus {
  background-color: #cc0000;
}
.red-area .progress-bar {
  background-color: #ff0000;
}
.red-area .panel-primary {
  border-color: #ff0000;
}
.red-area .panel-primary > .panel-heading {
  color: #ffffff;
  background-color: #ff0000;
  border-color: #ff0000;
}
.red-area .panel-primary > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #ff0000;
}
.red-area .panel-primary > .panel-heading > .dropdown .caret {
  border-color: #ffffff transparent;
}
.red-area .panel-primary > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #ff0000;
}

css规则将应用于包装在.red area类中的所有内容。
注:


更少的代码可以被优化
当用手复制所有部件时，处理引导更新并不容易

也请阅读此答案以适合扩展/复制类的最佳方式：
因为您提到@brand primary，我为此编写了一个示例

首先，我查找@brand primary的所有用法

./type.less:  color: @brand-primary;
./type.less:    color: darken(@brand-primary, 10%);
./variables.less:@brand-primary:               #428bca;
./variables.less:@link-color:                  @brand-primary;
./variables.less:@component-active-bg:         @brand-primary;
./variables.less:@btn-primary-bg:              @brand-primary;
./variables.less:@pagination-active-bg:        @brand-primary;
./variables.less:@label-primary-bg:            @brand-primary;
./variables.less:@progress-bar-bg:             @brand-primary;
./variables.less:@panel-primary-border:        @brand-primary;
./variables.less:@panel-primary-heading-bg:    @brand-primary;

@将此部分复制到新的less文件brand-primary.less后，brand primary将仅用于type.less中：

.red-area
{
    //type.less
    .text-primary {
      color: @brand-primary-red;
      &:hover {
        color: darken(@brand-primary-red, 10%);
      }
    }
}

我再次将带有@link color的规则从不同的文件复制到brand-primary.less，并将@link color重命名为@link color red。我复制了@link hover color，因为这是由
@link hover color:darken（@link color，15%）定义的在variables.less中

是的，你是对的，这会影响很多风格，而且会很复杂。例如，@component active bg将不用于直接设置任何样式@组件活动bg在variables.less中定义@dropdown link active bg、@nav pills active link hover bg和@list group active bg的值

您必须对基于品牌的每个变量重复此操作

./type.less:  color: @brand-primary;
./type.less:    color: darken(@brand-primary, 10%);
./variables.less:@brand-primary:               #428bca;
./variables.less:@link-color:                  @brand-primary;
./variables.less:@component-active-bg:         @brand-primary;
./variables.less:@btn-primary-bg:              @brand-primary;
./variables.less:@pagination-active-bg:        @brand-primary;
./variables.less:@label-primary-bg:            @brand-primary;
./variables.less:@progress-bar-bg:             @brand-primary;
./variables.less:@panel-primary-border:        @brand-primary;
./variables.less:@panel-primary-heading-bg:    @brand-primary;

在某些情况下，例如缩略图中的@link color.less，您只需复制较小的部分，如：

.red-area
{
    .thumbnail {
    // Add a hover state for linked versions only
      a&:hover,
      a&:focus,
      a&.active {
        border-color: @link-color-red;
      }
      }
}

在其他情况下，扩展可以帮助您减少要复制的代码，请参阅：

执行此操作后，最终的less文件将如下所示：

//
// Load core variables and mixins
// --------------------------------------------------

@import "variables.less";
@import "mixins.less";

@brand-primary-red:                     #ff0000;
@link-color-red:                        @brand-primary-red;
@link-hover-color-red:                  darken(@link-color-red, 15%);
@component-active-bg-red:               @brand-primary-red;
@dropdown-link-active-bg-red:           @component-active-bg-red;
@nav-pills-active-link-hover-bg-red:    @component-active-bg-red;
@list-group-active-bg-red:              @component-active-bg-red;
@list-group-active-border-red:          @list-group-active-bg-red;
@btn-primary-bg-red:                    @brand-primary-red;
    @btn-primary-border-red:                darken(@btn-primary-bg-red, 5%);
@pagination-active-bg-red:              @brand-primary-red;
@label-primary-bg-red:                  @brand-primary-red;
@progress-bar-bg-red:                   @brand-primary-red;
@panel-primary-border-red:              @brand-primary-red;
@panel-primary-heading-bg-red:          @brand-primary-red;

.red-area
{
    //type.less
    .text-primary {
      color: @brand-primary-red;
      &:hover {
        color: darken(@brand-primary-red, 10%);
      }
    }

    //scaffolding.less
    // Links

    a {
      color: @link-color-red;
      text-decoration: none;

      &:hover,
      &:focus {
        color: @link-hover-color-red;
        text-decoration: underline;
      }

      &:focus {
        .tab-focus();
      }
    }

    //thumbnails.less

    .thumbnail {
    // Add a hover state for linked versions only
      a&:hover,
      a&:focus,
      a&.active {
        border-color: @link-color-red;
      }
      }

    //buttons.less
    // Make a button look and behave like a link
    .btn-link {
      color: @link-color-red;
      font-weight: normal;
      cursor: pointer;
      border-radius: 0;

      &,
      &:active,
      &[disabled],
      fieldset[disabled] & {
        background-color: transparent;
        .box-shadow(none);
      }
      &,
      &:hover,
      &:focus,
      &:active {
        border-color: transparent;
      }
      &:hover,
      &:focus {
        color: @link-hover-color-red;
        text-decoration: underline;
        background-color: transparent;
      }
      &[disabled],
      fieldset[disabled] & {
        &:hover,
        &:focus {
          color: @btn-link-disabled-color;
          text-decoration: none;
        }
      }
    }

    //nav.less
      // Open dropdowns
      .open > a {
        &,
        &:hover,
        &:focus {
          background-color: @nav-link-hover-bg;
          border-color: @link-color-red;

          .caret {
            border-top-color: @link-hover-color-red;
            border-bottom-color: @link-hover-color-red;
          }
        }
      }

    //dropdowns.less
    // Active state
    .dropdown-menu > .active > a {
      &,
      &:hover,
      &:focus {
        color: @dropdown-link-active-color;
        text-decoration: none;
        outline: 0;
        background-color: @dropdown-link-active-bg-red;
      }
    }

    //nav.less
        .nav-pills {
      > li {
        float: left;

        // Links rendered as pills
        > a {
          border-radius: @nav-pills-border-radius;
        }
        + li {
          margin-left: 2px;
        }

        // Active state
        &.active > a {
          &,
          &:hover,
          &:focus {
            color: @nav-pills-active-link-hover-color;
            background-color: @nav-pills-active-link-hover-bg-red;

            .caret {
              border-top-color: @nav-pills-active-link-hover-color;
              border-bottom-color: @nav-pills-active-link-hover-color;
            }
          }
        }
      }
    }

    //list-group.less
    // Linked list items
    a.list-group-item {
      color: @list-group-link-color;

      .list-group-item-heading {
        color: @list-group-link-heading-color;
      }

      // Hover state
      &:hover,
      &:focus {
        text-decoration: none;
        background-color: @list-group-hover-bg;
      }

      // Active class on item itself, not parent
      &.active,
      &.active:hover,
      &.active:focus {
        z-index: 2; // Place active items above their siblings for proper border styling
        color: @list-group-active-color;
        background-color: @list-group-active-bg-red;
        border-color: @list-group-active-border-red;

        // Force color to inherit for custom content
        .list-group-item-heading {
          color: inherit;
        }
        .list-group-item-text {
          color: lighten(@list-group-active-bg, 40%);
        }
      }
    }

    //buttons.less
    .btn-primary {
      .button-variant(@btn-primary-color; @btn-primary-bg-red; @btn-primary-border-red);
    }

    //pagination.less
    .pagination {
      display: inline-block;
      padding-left: 0;
      margin: @line-height-computed 0;
      border-radius: @border-radius-base;

      > li {
        display: inline; // Remove list-style and block-level defaults
        > a,
        > span {
          position: relative;
          float: left; // Collapse white-space
          padding: @padding-base-vertical @padding-base-horizontal;
          line-height: @line-height-base;
          text-decoration: none;
          background-color: @pagination-bg;
          border: 1px solid @pagination-border;
          margin-left: -1px;
        }
        &:first-child {
          > a,
          > span {
            margin-left: 0;
            .border-left-radius(@border-radius-base);
          }
        }
        &:last-child {
          > a,
          > span {
            .border-right-radius(@border-radius-base);
          }
        }
      }

      > li > a,
      > li > span {
        &:hover,
        &:focus {
          background-color: @pagination-hover-bg;
        }
      }

      > .active > a,
      > .active > span {
        &,
        &:hover,
        &:focus {
          z-index: 2;
          color: @pagination-active-color;
          background-color: @pagination-active-bg-red;
          border-color: @pagination-active-bg-red;
          cursor: default;
        }
      }

      > .disabled {
        > span,
        > span:hover,
        > span:focus,
        > a,
        > a:hover,
        > a:focus {
          color: @pagination-disabled-color;
          background-color: @pagination-bg;
          border-color: @pagination-border;
          cursor: not-allowed;
        }
      }
    }

    //labels.less

    .label-primary {
      .label-variant(@label-primary-bg-red);
    }

    //progress-bars.less
    // Bar of progress
    .progress-bar {
      background-color: @progress-bar-bg-red;
    }

    //panels.less

    .panel-primary {
      .panel-variant(@panel-primary-border-red; @panel-primary-text; @panel-primary-heading-bg-red; @panel-primary-border-red);
    }

}

您可以像theme.less一样编译此文件，或者删除导入并将其导入boostrap.less中

最终的css将如下所示：

.red-area .text-primary {
  color: #ff0000;
}
.red-area .text-primary:hover {
  color: #cc0000;
}
.red-area a {
  color: #ff0000;
  text-decoration: none;
}
.red-area a:hover,
.red-area a:focus {
  color: #b30000;
  text-decoration: underline;
}
.red-area a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
a.red-area .thumbnail:hover,
a.red-area .thumbnail:focus,
a.red-area .thumbnail.active {
  border-color: #ff0000;
}
.red-area .btn-link {
  color: #ff0000;
  font-weight: normal;
  cursor: pointer;
  border-radius: 0;
}
.red-area .btn-link,
.red-area .btn-link:active,
.red-area .btn-link[disabled],
fieldset[disabled] .red-area .btn-link {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.red-area .btn-link,
.red-area .btn-link:hover,
.red-area .btn-link:focus,
.red-area .btn-link:active {
  border-color: transparent;
}
.red-area .btn-link:hover,
.red-area .btn-link:focus {
  color: #b30000;
  text-decoration: underline;
  background-color: transparent;
}
.red-area .btn-link[disabled]:hover,
fieldset[disabled] .red-area .btn-link:hover,
.red-area .btn-link[disabled]:focus,
fieldset[disabled] .red-area .btn-link:focus {
  color: #999999;
  text-decoration: none;
}
.red-area .open > a,
.red-area .open > a:hover,
.red-area .open > a:focus {
  background-color: #eeeeee;
  border-color: #ff0000;
}
.red-area .open > a .caret,
.red-area .open > a:hover .caret,
.red-area .open > a:focus .caret {
  border-top-color: #b30000;
  border-bottom-color: #b30000;
}
.red-area .dropdown-menu > .active > a,
.red-area .dropdown-menu > .active > a:hover,
.red-area .dropdown-menu > .active > a:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #ff0000;
}
.red-area .nav-pills > li {
  float: left;
}
.red-area .nav-pills > li > a {
  border-radius: 4px;
}
.red-area .nav-pills > li + li {
  margin-left: 2px;
}
.red-area .nav-pills > li.active > a,
.red-area .nav-pills > li.active > a:hover,
.red-area .nav-pills > li.active > a:focus {
  color: #ffffff;
  background-color: #ff0000;
}
.red-area .nav-pills > li.active > a .caret,
.red-area .nav-pills > li.active > a:hover .caret,
.red-area .nav-pills > li.active > a:focus .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}
.red-area a.list-group-item {
  color: #555555;
}
.red-area a.list-group-item .list-group-item-heading {
  color: #333333;
}
.red-area a.list-group-item:hover,
.red-area a.list-group-item:focus {
  text-decoration: none;
  background-color: #f5f5f5;
}
.red-area a.list-group-item.active,
.red-area a.list-group-item.active:hover,
.red-area a.list-group-item.active:focus {
  z-index: 2;
  color: #ffffff;
  background-color: #ff0000;
  border-color: #ff0000;
}
.red-area a.list-group-item.active .list-group-item-heading,
.red-area a.list-group-item.active:hover .list-group-item-heading,
.red-area a.list-group-item.active:focus .list-group-item-heading {
  color: inherit;
}
.red-area a.list-group-item.active .list-group-item-text,
.red-area a.list-group-item.active:hover .list-group-item-text,
.red-area a.list-group-item.active:focus .list-group-item-text {
  color: #e1edf7;
}
.red-area .btn-primary {
  color: #ffffff;
  background-color: #ff0000;
  border-color: #357ebd;
}
.red-area .btn-primary:hover,
.red-area .btn-primary:focus,
.red-area .btn-primary:active,
.red-area .btn-primary.active,
.open .dropdown-toggle.red-area .btn-primary {
  color: #ffffff;
  background-color: #d60000;
  border-color: #285e8e;
}
.red-area .btn-primary:active,
.red-area .btn-primary.active,
.open .dropdown-toggle.red-area .btn-primary {
  background-image: none;
}
.red-area .btn-primary.disabled,
.red-area .btn-primary[disabled],
fieldset[disabled] .red-area .btn-primary,
.red-area .btn-primary.disabled:hover,
.red-area .btn-primary[disabled]:hover,
fieldset[disabled] .red-area .btn-primary:hover,
.red-area .btn-primary.disabled:focus,
.red-area .btn-primary[disabled]:focus,
fieldset[disabled] .red-area .btn-primary:focus,
.red-area .btn-primary.disabled:active,
.red-area .btn-primary[disabled]:active,
fieldset[disabled] .red-area .btn-primary:active,
.red-area .btn-primary.disabled.active,
.red-area .btn-primary[disabled].active,
fieldset[disabled] .red-area .btn-primary.active {
  background-color: #ff0000;
  border-color: #357ebd;
}
.red-area .pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.red-area .pagination > li {
  display: inline;
}
.red-area .pagination > li > a,
.red-area .pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  line-height: 1.428571429;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  margin-left: -1px;
}
.red-area .pagination > li:first-child > a,
.red-area .pagination > li:first-child > span {
  margin-left: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.red-area .pagination > li:last-child > a,
.red-area .pagination > li:last-child > span {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.red-area .pagination > li > a:hover,
.red-area .pagination > li > span:hover,
.red-area .pagination > li > a:focus,
.red-area .pagination > li > span:focus {
  background-color: #eeeeee;
}
.red-area .pagination > .active > a,
.red-area .pagination > .active > span,
.red-area .pagination > .active > a:hover,
.red-area .pagination > .active > span:hover,
.red-area .pagination > .active > a:focus,
.red-area .pagination > .active > span:focus {
  z-index: 2;
  color: #ffffff;
  background-color: #ff0000;
  border-color: #ff0000;
  cursor: default;
}
.red-area .pagination > .disabled > span,
.red-area .pagination > .disabled > span:hover,
.red-area .pagination > .disabled > span:focus,
.red-area .pagination > .disabled > a,
.red-area .pagination > .disabled > a:hover,
.red-area .pagination > .disabled > a:focus {
  color: #999999;
  background-color: #ffffff;
  border-color: #dddddd;
  cursor: not-allowed;
}
.red-area .label-primary {
  background-color: #ff0000;
}
.red-area .label-primary[href]:hover,
.red-area .label-primary[href]:focus {
  background-color: #cc0000;
}
.red-area .progress-bar {
  background-color: #ff0000;
}
.red-area .panel-primary {
  border-color: #ff0000;
}
.red-area .panel-primary > .panel-heading {
  color: #ffffff;
  background-color: #ff0000;
  border-color: #ff0000;
}
.red-area .panel-primary > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #ff0000;
}
.red-area .panel-primary > .panel-heading > .dropdown .caret {
  border-color: #ffffff transparent;
}
.red-area .panel-primary > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #ff0000;
}

css规则将应用于包装在.red area类中的所有内容。
注:


更少的代码可以被优化
当用手复制所有部件时，处理引导更新并不容易

也请阅读此答案以适合扩展/复制类的最佳方式：
因为您提到@brand primary，我为此编写了一个示例

首先，我查找@brand primary的所有用法

./type.less:  color: @brand-primary;
./type.less:    color: darken(@brand-primary, 10%);
./variables.less:@brand-primary:               #428bca;
./variables.less:@link-color:                  @brand-primary;
./variables.less:@component-active-bg:         @brand-primary;
./variables.less:@btn-primary-bg:              @brand-primary;
./variables.less:@pagination-active-bg:        @brand-primary;
./variables.less:@label-primary-bg:            @brand-primary;
./variables.less:@progress-bar-bg:             @brand-primary;
./variables.less:@panel-primary-border:        @brand-primary;
./variables.less:@panel-primary-heading-bg:    @brand-primary;

@将此部分复制到新的less文件brand-primary.less后，brand primary将仅用于type.less中：

.red-area
{
    //type.less
    .text-primary {
      color: @brand-primary-red;
      &:hover {
        color: darken(@brand-primary-red, 10%);
      }
    }
}

我再次将带有@link color的规则从不同的文件复制到brand-primary.less，并将@link color重命名为@link color red。我复制了@link hover color，因为这是由
@link hover color:darken（@link color，15%）定义的在variables.less中

是的，你是对的，这会影响很多风格，而且会很复杂。例如，@component active bg将不用于直接设置任何样式@组件活动bg在variables.less中定义@dropdown link active bg、@nav pills active link hover bg和@list group active bg的值

您必须对基于品牌的每个变量重复此操作

./type.less:  color: @brand-primary;
./type.less:    color: darken(@brand-primary, 10%);
./variables.less:@brand-primary:               #428bca;
./variables.less:@link-color:                  @brand-primary;
./variables.less:@component-active-bg:         @brand-primary;
./variables.less:@btn-primary-bg:              @brand-primary;
./variables.less:@pagination-active-bg:        @brand-primary;
./variables.less:@label-primary-bg:            @brand-primary;
./variables.less:@progress-bar-bg:             @brand-primary;
./variables.less:@panel-primary-border:        @brand-primary;
./variables.less:@panel-primary-heading-bg:    @brand-primary;

在某些情况下，例如缩略图中的@link color.less，您只需复制较小的部分，如：

.red-area
{
    .thumbnail {
    // Add a hover state for linked versions only
      a&:hover,
      a&:focus,
      a&.active {
        border-color: @link-color-red;
      }
      }
}

在其他情况下，扩展可以帮助您减少要复制的代码，请参阅：

执行此操作后，最终的less文件将如下所示：

//
// Load core variables and mixins
// --------------------------------------------------

@import "variables.less";
@import "mixins.less";

@brand-primary-red:                     #ff0000;
@link-color-red:                        @brand-primary-red;
@link-hover-color-red:                  darken(@link-color-red, 15%);
@component-active-bg-red:               @brand-primary-red;
@dropdown-link-active-bg-red:           @component-active-bg-red;
@nav-pills-active-link-hover-bg-red:    @component-active-bg-red;
@list-group-active-bg-red:              @component-active-bg-red;
@list-group-active-border-red:          @list-group-active-bg-red;
@btn-primary-bg-red:                    @brand-primary-red;
    @btn-primary-border-red:                darken(@btn-primary-bg-red, 5%);
@pagination-active-bg-red:              @brand-primary-red;
@label-primary-bg-red:                  @brand-primary-red;
@progress-bar-bg-red:                   @brand-primary-red;
@panel-primary-border-red:              @brand-primary-red;
@panel-primary-heading-bg-red:          @brand-primary-red;

.red-area
{
    //type.less
    .text-primary {
      color: @brand-primary-red;
      &:hover {
        color: darken(@brand-primary-red, 10%);
      }
    }

    //scaffolding.less
    // Links

    a {
      color: @link-color-red;
      text-decoration: none;

      &:hover,
      &:focus {
        color: @link-hover-color-red;
        text-decoration: underline;
      }

      &:focus {
        .tab-focus();
      }
    }

    //thumbnails.less

    .thumbnail {
    // Add a hover state for linked versions only
      a&:hover,
      a&:focus,
      a&.active {
        border-color: @link-color-red;
      }
      }

    //buttons.less
    // Make a button look and behave like a link
    .btn-link {
      color: @link-color-red;
      font-weight: normal;
      cursor: pointer;
      border-radius: 0;

      &,
      &:active,
      &[disabled],
      fieldset[disabled] & {
        background-color: transparent;
        .box-shadow(none);
      }
      &,
      &:hover,
      &:focus,
      &:active {
        border-color: transparent;
      }
      &:hover,
      &:focus {
        color: @link-hover-color-red;
        text-decoration: underline;
        background-color: transparent;
      }
      &[disabled],
      fieldset[disabled] & {
        &:hover,
        &:focus {
          color: @btn-link-disabled-color;
          text-decoration: none;
        }
      }
    }

    //nav.less
      // Open dropdowns
      .open > a {
        &,
        &:hover,
        &:focus {
          background-color: @nav-link-hover-bg;
          border-color: @link-color-red;

          .caret {
            border-top-color: @link-hover-color-red;
            border-bottom-color: @link-hover-color-red;
          }
        }
      }

    //dropdowns.less
    // Active state
    .dropdown-menu > .active > a {
      &,
      &:hover,
      &:focus {
        color: @dropdown-link-active-color;
        text-decoration: none;
        outline: 0;
        background-color: @dropdown-link-active-bg-red;
      }
    }

    //nav.less
        .nav-pills {
      > li {
        float: left;

        // Links rendered as pills
        > a {
          border-radius: @nav-pills-border-radius;
        }
        + li {
          margin-left: 2px;
        }

        // Active state
        &.active > a {
          &,
          &:hover,
          &:focus {
            color: @nav-pills-active-link-hover-color;
            background-color: @nav-pills-active-link-hover-bg-red;

            .caret {
              border-top-color: @nav-pills-active-link-hover-color;
              border-bottom-color: @nav-pills-active-link-hover-color;
            }
          }
        }
      }
    }

    //list-group.less
    // Linked list items
    a.list-group-item {
      color: @list-group-link-color;

      .list-group-item-heading {
        color: @list-group-link-heading-color;
      }

      // Hover state
      &:hover,
      &:focus {
        text-decoration: none;
        background-color: @list-group-hover-bg;
      }

      // Active class on item itself, not parent
      &.active,
      &.active:hover,
      &.active:focus {
        z-index: 2; // Place active items above their siblings for proper border styling
        color: @list-group-active-color;
        background-color: @list-group-active-bg-red;
        border-color: @list-group-active-border-red;

        // Force color to inherit for custom content
        .list-group-item-heading {
          color: inherit;
        }
        .list-group-item-text {
          color: lighten(@list-group-active-bg, 40%);
        }
      }
    }

    //buttons.less
    .btn-primary {
      .button-variant(@btn-primary-color; @btn-primary-bg-red; @btn-primary-border-red);
    }

    //pagination.less
    .pagination {
      display: inline-block;
      padding-left: 0;
      margin: @line-height-computed 0;
      border-radius: @border-radius-base;

      > li {
        display: inline; // Remove list-style and block-level defaults
        > a,
        > span {
          position: relative;
          float: left; // Collapse white-space
          padding: @padding-base-vertical @padding-base-horizontal;
          line-height: @line-height-base;
          text-decoration: none;
          background-color: @pagination-bg;
          border: 1px solid @pagination-border;
          margin-left: -1px;
        }
        &:first-child {
          > a,
          > span {
            margin-left: 0;
            .border-left-radius(@border-radius-base);
          }
        }
        &:last-child {
          > a,
          > span {
            .border-right-radius(@border-radius-base);
          }
        }
      }

      > li > a,
      > li > span {
        &:hover,
        &:focus {
          background-color: @pagination-hover-bg;
        }
      }

      > .active > a,
      > .active > span {
        &,
        &:hover,
        &:focus {
          z-index: 2;
          color: @pagination-active-color;
          background-color: @pagination-active-bg-red;
          border-color: @pagination-active-bg-red;
          cursor: default;
        }
      }

      > .disabled {
        > span,
        > span:hover,
        > span:focus,
        > a,
        > a:hover,
        > a:focus {
          color: @pagination-disabled-color;
          background-color: @pagination-bg;
          border-color: @pagination-border;
          cursor: not-allowed;
        }
      }
    }

    //labels.less

    .label-primary {
      .label-variant(@label-primary-bg-red);
    }

    //progress-bars.less
    // Bar of progress
    .progress-bar {
      background-color: @progress-bar-bg-red;
    }

    //panels.less

    .panel-primary {
      .panel-variant(@panel-primary-border-red; @panel-primary-text; @panel-primary-heading-bg-red; @panel-primary-border-red);
    }

}

您可以像theme.less一样编译此文件，或者删除导入并将其导入boostrap.less中

最终的css将如下所示：

.red-area .text-primary {
  color: #ff0000;
}
.red-area .text-primary:hover {
  color: #cc0000;
}
.red-area a {
  color: #ff0000;
  text-decoration: none;
}
.red-area a:hover,
.red-area a:focus {
  color: #b30000;
  text-decoration: underline;
}
.red-area a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
a.red-area .thumbnail:hover,
a.red-area .thumbnail:focus,
a.red-area .thumbnail.active {
  border-color: #ff0000;
}
.red-area .btn-link {
  color: #ff0000;
  font-weight: normal;
  cursor: pointer;
  border-radius: 0;
}
.red-area .btn-link,
.red-area .btn-link:active,
.red-area .btn-link[disabled],
fieldset[disabled] .red-area .btn-link {
  background-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}
.red-area .btn-link,
.red-area .btn-link:hover,
.red-area .btn-link:focus,
.red-area .btn-link:active {
  border-color: transparent;
}
.red-area .btn-link:hover,
.red-area .btn-link:focus {
  color: #b30000;
  text-decoration: underline;
  background-color: transparent;
}
.red-area .btn-link[disabled]:hover,
fieldset[disabled] .red-area .btn-link:hover,
.red-area .btn-link[disabled]:focus,
fieldset[disabled] .red-area .btn-link:focus {
  color: #999999;
  text-decoration: none;
}
.red-area .open > a,
.red-area .open > a:hover,
.red-area .open > a:focus {
  background-color: #eeeeee;
  border-color: #ff0000;
}
.red-area .open > a .caret,
.red-area .open > a:hover .caret,
.red-area .open > a:focus .caret {
  border-top-color: #b30000;
  border-bottom-color: #b30000;
}
.red-area .dropdown-menu > .active > a,
.red-area .dropdown-menu > .active > a:hover,
.red-area .dropdown-menu > .active > a:focus {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #ff0000;
}
.red-area .nav-pills > li {
  float: left;
}
.red-area .nav-pills > li > a {
  border-radius: 4px;
}
.red-area .nav-pills > li + li {
  margin-left: 2px;
}
.red-area .nav-pills > li.active > a,
.red-area .nav-pills > li.active > a:hover,
.red-area .nav-pills > li.active > a:focus {
  color: #ffffff;
  background-color: #ff0000;
}
.red-area .nav-pills > li.active > a .caret,
.red-area .nav-pills > li.active > a:hover .caret,
.red-area .nav-pills > li.active > a:focus .caret {
  border-top-color: #ffffff;
  border-bottom-color: #ffffff;
}
.red-area a.list-group-item {
  color: #555555;
}
.red-area a.list-group-item .list-group-item-heading {
  color: #333333;
}
.red-area a.list-group-item:hover,
.red-area a.list-group-item:focus {
  text-decoration: none;
  background-color: #f5f5f5;
}
.red-area a.list-group-item.active,
.red-area a.list-group-item.active:hover,
.red-area a.list-group-item.active:focus {
  z-index: 2;
  color: #ffffff;
  background-color: #ff0000;
  border-color: #ff0000;
}
.red-area a.list-group-item.active .list-group-item-heading,
.red-area a.list-group-item.active:hover .list-group-item-heading,
.red-area a.list-group-item.active:focus .list-group-item-heading {
  color: inherit;
}
.red-area a.list-group-item.active .list-group-item-text,
.red-area a.list-group-item.active:hover .list-group-item-text,
.red-area a.list-group-item.active:focus .list-group-item-text {
  color: #e1edf7;
}
.red-area .btn-primary {
  color: #ffffff;
  background-color: #ff0000;
  border-color: #357ebd;
}
.red-area .btn-primary:hover,
.red-area .btn-primary:focus,
.red-area .btn-primary:active,
.red-area .btn-primary.active,
.open .dropdown-toggle.red-area .btn-primary {
  color: #ffffff;
  background-color: #d60000;
  border-color: #285e8e;
}
.red-area .btn-primary:active,
.red-area .btn-primary.active,
.open .dropdown-toggle.red-area .btn-primary {
  background-image: none;
}
.red-area .btn-primary.disabled,
.red-area .btn-primary[disabled],
fieldset[disabled] .red-area .btn-primary,
.red-area .btn-primary.disabled:hover,
.red-area .btn-primary[disabled]:hover,
fieldset[disabled] .red-area .btn-primary:hover,
.red-area .btn-primary.disabled:focus,
.red-area .btn-primary[disabled]:focus,
fieldset[disabled] .red-area .btn-primary:focus,
.red-area .btn-primary.disabled:active,
.red-area .btn-primary[disabled]:active,
fieldset[disabled] .red-area .btn-primary:active,
.red-area .btn-primary.disabled.active,
.red-area .btn-primary[disabled].active,
fieldset[disabled] .red-area .btn-primary.active {
  background-color: #ff0000;
  border-color: #357ebd;
}
.red-area .pagination {
  display: inline-block;
  padding-left: 0;
  margin: 20px 0;
  border-radius: 4px;
}
.red-area .pagination > li {
  display: inline;
}
.red-area .pagination > li > a,
.red-area .pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  line-height: 1.428571429;
  text-decoration: none;
  background-color: #ffffff;
  border: 1px solid #dddddd;
  margin-left: -1px;
}
.red-area .pagination > li:first-child > a,
.red-area .pagination > li:first-child > span {
  margin-left: 0;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;
}
.red-area .pagination > li:last-child > a,
.red-area .pagination > li:last-child > span {
  border-bottom-right-radius: 4px;
  border-top-right-radius: 4px;
}
.red-area .pagination > li > a:hover,
.red-area .pagination > li > span:hover,
.red-area .pagination > li > a:focus,
.red-area .pagination > li > span:focus {
  background-color: #eeeeee;
}
.red-area .pagination > .active > a,
.red-area .pagination > .active > span,
.red-area .pagination > .active > a:hover,
.red-area .pagination > .active > span:hover,
.red-area .pagination > .active > a:focus,
.red-area .pagination > .active > span:focus {
  z-index: 2;
  color: #ffffff;
  background-color: #ff0000;
  border-color: #ff0000;
  cursor: default;
}
.red-area .pagination > .disabled > span,
.red-area .pagination > .disabled > span:hover,
.red-area .pagination > .disabled > span:focus,
.red-area .pagination > .disabled > a,
.red-area .pagination > .disabled > a:hover,
.red-area .pagination > .disabled > a:focus {
  color: #999999;
  background-color: #ffffff;
  border-color: #dddddd;
  cursor: not-allowed;
}
.red-area .label-primary {
  background-color: #ff0000;
}
.red-area .label-primary[href]:hover,
.red-area .label-primary[href]:focus {
  background-color: #cc0000;
}
.red-area .progress-bar {
  background-color: #ff0000;
}
.red-area .panel-primary {
  border-color: #ff0000;
}
.red-area .panel-primary > .panel-heading {
  color: #ffffff;
  background-color: #ff0000;
  border-color: #ff0000;
}
.red-area .panel-primary > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #ff0000;
}
.red-area .panel-primary > .panel-heading > .dropdown .caret {
  border-color: #ffffff transparent;
}
.red-area .panel-primary > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #ff0000;
}

css规则将应用于包装在.red area类中的所有内容。
注:


更少的代码可以被优化
当用手复制所有部件时，处理引导更新并不容易

也请阅读此答案以适合扩展/复制类的最佳方式：
因为您提到@brand primary，我为此编写了一个示例

首先，我查找@brand primary的所有用法

./type.less:  color: @brand-primary;
./type.less:    color: darken(@brand-primary, 10%);
./variables.less:@brand-primary:               #428bca;
./variables.less:@link-color:                  @brand-primary;
./variables.less:@component-active-bg:         @brand-primary;
./variables.less:@btn-primary-bg:              @brand-primary;
./variables.less:@pagination-active-bg:        @brand-primary;
./variables.less:@label-primary-bg:            @brand-primary;
./variables.less:@progress-bar-bg:             @brand-primary;
./variables.less:@panel-primary-border:        @brand-primary;
./variables.less:@panel-primary-heading-bg:    @brand-primary;

@将此部分复制到新的less文件brand-primary.less后，brand primary将仅用于type.less中：

.red-area
{
    //type.less
    .text-primary {
      color: @brand-primary-red;
      &:hover {
        color: darken(@brand-primary-red, 10%);
      }
    }
}

我再次将带有@link color的规则从不同的文件复制到brand-primary.less，并将@link color重命名为@link color red。我复制了@link悬停颜色，因为这是由
@link hove定义的