Question

我想知道是否有可能获得此代码：

section#content {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
}
section#content > div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;
    overflow-y: auto;
    padding-left:60px;
}

通过这样做：

section#content {
    position: absolute; 
    top:0; 
    right:0; 
    bottom:0; 
    left:0; 
    overflow: hidden; 
    & > div {
        @extend section#content;
        overflow-y: auto;
        padding-left:60px;
    }
}

因为现在我的输出是：

section#content, section#content > div {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
    }
    section#content > div, section#content > div > div {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        overflow: hidden;
        overflow-y: auto;
        padding-left:60px;
    }

正如你所看到的，每个类都有另一个“＆gt; div”因为扩展名称正在调用它... 对不起我的英语我是法国人

Answer 1

谢谢Peiwen。我是Compass / SASS的新手，所以对于那些在我这里寻找解决方案的人来说：

<ion-content ng-controller="DashboardCtrl">
  <div class="card">
    <div class="list list-inset">
      <div class="item item-divider">
        <div class="row row-center">
          <div class="col col-25">Ticker</div>
          <div class="col col-25">Price</div>
          <div class="col col-25">Shares</div>
          <div class="col col-25">Value</div>
        </div>
      </div>
      <label class="item" ng-repeat="item in sData">
        <div class="row row-center">
          <div class="col col-25">{{item.ticker}}</div>
          <div class="col col-25">{{item.price}}</div>
          <div class="col col-25">{{item.shares}}</div>
          <div class="col col-25">{{item.value}}</div>
        </div>
      </label>
    </div>
  </div>
</ion-content>

Sass嵌套扩展内部是自己的父级

1 个答案: