Question

我在我的项目中使用bootstrap和指南针，经过一些更改后我发现当我尝试用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中使用包含list-component的样式，但是我从这些代码中删除了它们样本以便更好地了解情况）。

有谁知道如何优化此代码？

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

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

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

Answer 1

真的很难确定您的代码出错的地方，因为您没有提供足够的代码。 variables中的内容是什么？ bootstrap中的内容是什么？ mixin和你正在扩展的元素有什么？但假设您在使用评论标识的块中出现问题，那么让我们先谈谈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包含make-md-column基于$columns的所有内容，包含来自li的所有内容clearfix的子.controls声明，以及.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; } }的每个声明。

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

是的，那些将编译为很多的CSS。所以，也许你想看看那些mixin并使它们更具原子性或动态性，或者实际上有多少样式来自{{1}}声明。

在bootstrap saas中扩展btn-group挂起浏览器

1 个答案: