html - SCSS - 嵌套的 css 类导致不同的大小(宽度和高度)

Question

为什么这会影响我的按钮的大小。

这给了我非常小的按钮:

.btn {
  fill: $btn-icon-standard;

  &.--desk {
    width: 56px;
    height: 39px;
  }
}

与此相反，它给了我更大的:

.btn-desk {
  fill: $btn-icon-standard;
  width: 56px;
  height: 39px;
}

为什么会这样？顺便说一句，scss 应用于 svg sprite，如果这有任何帮助的话!

编辑:我知道在第一种情况下我必须使用 btn desk 作为按钮的类，而在后一种情况下我将 btn-desk 作为元素的类.

我在我的 html 中使用按钮是这样的:

<svg class="btn --desk"> //in the latter case i use btn-desk of course
 <use xlink:href="#btn-desk" />
</svg>

我对应的 Sprite :

  <symbol id="btn-desk" viewBox="0 0 56 39">
    <g id="homepage" stroke="none" stroke-width="1" fill-rule="evenodd">
        <g id="chosen" transform="translate(-217.000000, -812.000000)">
            <g id="Group" transform="translate(217.000000, 812.000000)">
                <path d="M12.6983173,-10.7712321 C12.6983173,-11.5732117 13.3431282,-12.2233446 14.1459422,-12.2233446 L42.1229451,-12.2233446 C42.9224463,-12.2233446 43.5705701,-11.5825593 43.5705701,-10.7712321 L43.5705701,41.6777729 C43.5705701,42.4797525 42.9257592,43.1298854 42.1229451,43.1298854 L14.1459422,43.1298854 C13.3464411,43.1298854 12.6983173,42.4891002 12.6983173,41.6777729 L12.6983173,-10.7712321 Z M16.5573489,-6.82368293 C16.5573489,-7.62220908 17.2007906,-8.26954242 18.0057472,-8.26954242 L38.2631402,-8.26954242 C39.0630685,-8.26954242 39.7115385,-7.61689199 39.7115385,-6.82368293 L39.7115385,37.7302238 C39.7115385,38.5287499 39.0680968,39.1760833 38.2631402,39.1760833 L18.0057472,39.1760833 C17.2058189,39.1760833 16.5573489,38.5234328 16.5573489,37.7302238 L16.5573489,-6.82368293 Z" id="Combined-Shape" transform="translate(28.134444, 15.453270) rotate(-270.000000) translate(-28.134444, -15.453270) "></path>
                <rect id="Rectangle-17" x="4.67153159" y="34.9157933" width="46.3083791" height="3.95380214" rx="1.45152"></rect>
            </g>
        </g>
    </g>
  </symbol>

Answer 1

你的选择器表达式有一些语法错误

.btn {
  &.desk { color: green; }
}
/* output: */
.btn.desk { color: green; }


/* but you may need for */
.btn {
  &-desk { color: green; }
}
/* which output: */
.btn-desk { color: green; }