0

我有一个包含多个区域的网页设计。每个区域都有自己的样式，区域 1 的原色是红色，区域 2 的原色是黑色等。我正在使用较少的内容，并且您有 theme.less 几乎完全符合我的需要。问题是主题在 bootstrap 2 外观中转换了网站。bootstrap 3有没有theme.less？

我有一个解决方案是生成多个带有特定变量的引导文件。less，在正文上有一个特定的 id，但是我有 5 倍的代码，只需要颜色变化！

基本上我只想更改@brand-primary: #992b9d; 在variables.less。但是这么多文件/变量正在使用该变量，我想为浏览器提供纯 CSS。

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

4

1 回答 1

3

因为你提到@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;

@brand-primary 将仅用于 type.less 一旦我将此部分复制到我的新更少文件brand-primary.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 不会用于直接设置任何样式。@component-active-bg 在 variables.less 中定义 @dropdown-link-active-bg、@nav-pills-active-link-hover-bg 和 @list-group-active-bg 的值

您将不得不根据品牌主要对每个变量重复此操作

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

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

在其他情况下，扩展可以帮助您减少要复制的代码，请参阅：https ://stackoverflow.com/a/15573240/1596547

执行此操作，您的最终 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 类中的所有内容。笔记：

  • 可以优化的代码越少。
  • 当手动复制所有部分时，处理 Bootstrap 的更新并不容易

另请阅读此答案以适合扩展/复制类的最佳方式：https ://stackoverflow.com/a/19980145/1596547

于 2013-11-14T19:50:18.487 回答