嵌套scss和共享组样式有问题？

Question

我有以下我正在创建的UI小部件：

http://codepen.io/ac123/pen/OpQxmd

<div id="MapKeys">
    <div id="RegionalSupply">
        <div class="font header">Regional supply</div>
        <div class="RegionalSupply circle"></div>
        <div class="RegionalSupply detail">Circles sized by the amount of change from the previous period</div>
    </div>
    <div id="CorridorNetFlowDirection">
        <div class="font header">Corridor net flow direction</div>
        <div class="rectangle"></div>
        <div class="CorridorNetFlowDirection detail">Lines sized by the amount of change in net flow from the previous period</div>
    </div>
</div>

#MapKeys
{
    .font{
        &.header{
            font-size:16px;
        }
        &.detail{
            font-size:12px;
        }
    }

  /*
    .circle 
    {
        width: 14px;
        height: 14px;
        background: lightgrey;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border-radius: 7px;
        display:inline-block;
    }
  */

    .rectangle
    {
        width: 12px;
        height: 10px;
        background: lightgrey;
    }

    .display
    {
        &.inlineBlock{ display: inline-block }
    }

    #RegionalSupply{

        height:100px;
        width:240px;
        border:solid purple 1px;
        display:inline-block;
        padding:10px;

        &.header{
            font-size:16px;
        }

        &.detail{
            display:inline-block;
            width:100px;
            font-size:12px;
        }

        &.circle {
            width: 20px;
            height: 20px;
            background: red;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
        }
    }

    #CorridorNetFlowDirection{

        height:100px;
        width:240px;
        border:solid red 1px;
        display:inline-block;
        padding:10px;
        /*&.rectangle{
            width:50px;
            height:25px;
            background:blue;
        }*/

        &.detail{
            display:inline-block;
            width:100px;
            font-size:12px;
        }
    }
}

#MapKeys
{
    .font{
        &.header{
            font-size:16px;
        }
        &.detail{
            font-size:12px;
        }
    }

  /*
    .circle 
    {
        width: 14px;
        height: 14px;
        background: lightgrey;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border-radius: 7px;
        display:inline-block;
    }
  */

    .rectangle
    {
        width: 12px;
        height: 10px;
        background: lightgrey;
    }

    .display
    {
        &.inlineBlock{ display: inline-block }
    }

    #RegionalSupply{

        height:100px;
        width:240px;
        border:solid purple 1px;
        display:inline-block;
        padding:10px;

        &.header{
            font-size:16px;
        }

        &.detail{
            display:inline-block;
            width:100px;
            font-size:12px;
        }

        &.circle {
            width: 20px;
            height: 20px;
            background: red;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
        }
    }

    #CorridorNetFlowDirection{

        height:100px;
        width:240px;
        border:solid red 1px;
        display:inline-block;
        padding:10px;
        /*&.rectangle{
            width:50px;
            height:25px;
            background:blue;
        }*/

        &.detail{
            display:inline-block;
            width:100px;
            font-size:12px;
        }
    }
}

只有RegionalSupply UI组件才需要使用circle scss，但是当我在RegionalSupply scss之外定义类时，我似乎只能让圆圈工作。

此外，两个UI组件应具有相同的标题和详细信息样式。在scss中实现这个最优雅的方法是什么？出于某种原因，scss样式似乎没有得到应用。

Answer 1

&.circle内#RegionalSupply。这将生成#RegionalSupply.circle

您的代码似乎表明它需要.RegionalSupply.circle：

除了你的评论之外，我还会做一些解释。

你正在做&.circle。这里的＆amp; 表示父选择器，允许您追加或前置。如果您只想在.circle内嵌套#RegionalSupply的样式，只需删除＆amp; 。

实施例

此SCSS：

#MyID {
  &.circle {
    height: 50px;
  }
}

#MyID {
  .circle& {
    height: 50px;
  }
}

#MyID {
  &-bigger {
    height: 100px;
  }
}

#MyID {
  .circle {
    border-radius: 50%;
  }
}

将生成此CSS：

#MyID.circle {
  height: 50px;
}

.circle#MyID {
  height: 50px;
}

#MyID-bigger {
  height: 100px;
}

#MyID .circle {
  border-radius: 50%;
}

Answer 2

当嵌套到某个级别时，而不是像这样选择：

＆安培;

我需要选择这样：

＆安培; ＆GT;