在引导 saas 中扩展 btn-group 会挂起浏览器答案

【问题标题】：extend btn-group in bootstrap saas hangs browser在引导 saas 中扩展 btn-group 会挂起浏览器
【发布时间】：2014-06-30 04:18:02
【问题描述】：

我在我的项目中使用引导程序和指南针，经过一些更改后，我发现当我尝试使用 chrome 检查我的页面时，浏览器只是挂起。我设法将有问题的代码与应用程序的其余部分分开，然后我意识到浏览器崩溃的原因是扩展 btn-group 类生成的复杂 css。

例如当我有这么简单的html时：

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Test</title>
        <link rel="stylesheet" href="../css/test.css"/>
    </head>
    <body>
        <article class="container">
            <header class="page-header">
                <div class="actions">
                    <a class="edit" href="#"><span class="icon"></span></a>
                    <a class="remove" href="#"><span class="icon"></span></a>
                </div>
                <h1 class="title">Some title</h1>
            </header>
        </article>
    </body>
</html>

还有这样的scss：

@import "compass";
@import "variables";
@import "bootstrap";

@mixin list-component($columns) {
  @include make-md-column($columns);

  li {
    @include clearfix;

    .controls {
      //the problem is here
      @extend .btn-group, .btn-group-sm;
    }
  }
}

.notepads, .last-viewed-notes {
  @include list-component(3);
}

.last-changed-notes {
  @include list-component(6);
}
.notes {
  @include list-component(3);
}

.actions {
  @include clearfix;
  @extend .btn-group, .btn-group-lg;

  a, button {
    //or the problem is here
    @extend .btn, .btn-default;

    .icon {
      @extend .glyphicon;
    }
    &.edit .icon {
      @extend .glyphicon-edit;
    }
    &.remove .icon {
      @extend .glyphicon-trash;
    }
  }
}

使用该代码，生成的 css 具有非常长且复杂的选择器，当我尝试检查页面上的按钮时，此选择器会杀死浏览器（我使用的样式在我的 html 中包含列表组件，但我从这些代码中删除了它们示例以便更好地了解情况）。

有人知道如何优化这段代码吗？

就像我在评论中所说：这是完整的测试项目：http://we.tl/bk8KB1cjIQ

关于建议的解决方案：当然，我可以简单地使用引导类而不是我自己的，但是我松散了很好的语义文档并以大量样板文件结尾。第二种选择可以为这些组编写自己的样式，但我不想重新发明轮子。最后我可以从 bootstrap github 复制粘贴 scss 到我的 mixin，但这是很多工作要做，我很乐意省略。

说实话，我没有看到任何其他好的解决方案，但也许有人会想出一些好主意？

【问题讨论】：

标签： html twitter-bootstrap sass compass-sass

【解决方案1】：

真的很难确定你的代码哪里出了问题，因为你没有提供足够的代码。 variables 中有什么内容？ bootstrap 中有什么内容？ mixin 和您正在扩展的元素存在什么？但是假设问题是在您使用 cmets 确定的块中，让我们稍微谈谈 Sass 将如何解压缩这些部分：

@mixin list-component($columns) {
  @include make-md-column($columns);

  li {
    @include clearfix;

    .controls {
      //the problem is here
      @extend .btn-group, .btn-group-sm;
    }
  }
}

您的 list-component mixin 包括基于 $columns 的 make-md-column 中的所有内容，一个子 li 声明，其中包括来自 clearfix 的所有内容，以及一个子 .controls 声明，其中包括 every .btn-group 和 .btn-group-sm 的声明。

a, button {
    //or the problem is here
    @extend .btn, .btn-default;

    .icon {
      @extend .glyphicon;
    }
    &.edit .icon {
      @extend .glyphicon-edit;
    }
    &.remove .icon {
      @extend .glyphicon-trash;
    }
  }

您的a 和button 声明（嵌套在.actions 内）将扩展.btn 和.btn-default 的每个声明，并为每个a .icon, button .icon, a.edit .icon, button.edit .icon, a.remove .icon, button.remove .icon 创建声明，这将扩展every .glyphicon-* 类的声明。

是的，它们会编译成很多的 CSS。所以，也许你想看看这些 mixin 并让它们更具原子性或动态性，或者实际上有多少样式来自 btn-* 声明。

【讨论】：

感谢您的帮助，是的，您是对的，会有很多 css，这就是问题所在。但是很难解决这个问题，因为引导程序和变量是引导程序中的库文件。引导程序在此处有详细记录：getbootstrap.com github.com/twbs/bootstrap-sass。但是我在这个来源中找不到解决方案，所以我寻求帮助。明天我可以制作一个示例项目，其中包含两个附加到我的问题的文件。感谢您对问题的更详细说明。