Question

我有一个离子应用程序，它有一个page.html，我试着将这个sass代码应用到我的flexbox表但不能编译。我有这个css来设计bg颜色

                        .Rtable-cell--light {
                                            background-color: white;
                                            border-color: mix(white,$tableColour,80%);
                                            }

我在包含

的Rtable-cell中调用

                            .Rtable-cell {
                                    box-sizing: border-box;
                                    flex-grow: 1;
                                    width: 100%;  // Default to full width
                                    padding: 0.8em 1.2em;
                                    overflow: hidden; // Or flex might break
                                    list-style: none;
                                    border: solid $bw white;
                                    background: fade(slategrey,20%);
                                    > h1, > h2, > h3, > h4, > h5, > h6 { margin: 0; }
                                    margin: -$bw 0 0 -$bw;  //border collapse offset
                                    @include Rtable-cell--light;
                                    }

为什么我会收到错误？

我的flexbox表看起来像这样

      <div class="Rtable Rtable--4cols">

        <div class="Rtable-cell"><h3>Eddard Stark</h3></div>
        <div class="Rtable-cell">Has a sword named Ice</div>
        <div class="Rtable-cell">No direwolf</div>
        <div class="Rtable-cell"><strong>Lord of Winterfell</strong></div>

        <div class="Rtable-cell"><h3>Jon Snow</h3></div>
        <div class="Rtable-cell">Has a sword named Longclaw</div>
        <div class="Rtable-cell">Direwolf: Ghost</div>
        <div class="Rtable-cell"><strong>Knows nothing</strong></div>

        <div class="Rtable-cell"><h3>Arya Stark</h3></div>
        <div class="Rtable-cell">Has a sword named Needle</div>
        <div class="Rtable-cell">Direwolf: Nymeria</div>
        <div class="Rtable-cell"><strong>No one</strong></div>

      </div>
    </div>

Answer 1

您使用的是错误的关键字。 .Rtable-cell - light不是mixin，而是一个选择器，所以你应该使用@extend代替@include，如：

@extend .Rtable-cell--light;

文档链接：http://sass-lang.com/guide#topic-7

没有mixin命名为Rtable-cell - Scss中的轻度错误

1 个答案: