2017-10-28 81 views
0

我有一个离子应用程序,它有一个page.html,我尝试将这个sass代码应用到我的flexbox表,但不能编译。我有这样的CSS样式背景色没有mixin命名为Rtable-cell - Scss中的光线错误

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

,我打电话给我的Rtable细胞内与包括

      .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> 

回答

1

您正在使用错误的关键字。 .Rtable细胞 - 光不是一个mixin,而是一个选择,所以不是@include,你应该使用@extend,如:

@extend .Rtable-cell--light; 

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

+0

该文档似乎指向错误的部分(#链接似乎没有在那里正常工作),但你可以找到“扩展/继承”部分。 :) – vicbyte

+1

更好的是使用[占位符选择器](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#Placeholder_Selectors___foo)来避免在一个情况下创建单独的CSS规则,如果'Rtable-cell-light '仅用作模板。 – Flying

+0

谢谢你,你是对的。我会尽快阅读更多的sass文档 –