sass 两层嵌套

Question

我正在使用 sass 转换网站，嵌套使我不必重复父选择器（例如 - sociialmedia、socialmedia li、sociallmedia img）

但是，当视口为移动尺寸时，我需要更改社交媒体 img 的样式。因此我创建了以下代码：

我的问题是：

1) 这是一种有效的编码方式（示例 1），还是有更好的方法？

2) 示例 1 有效，但示例 2 是否更有效？

示例 1

 #socialmedia {
      float: right;

      li {
      float: left;
        }

     @include bp(mobile) {
     img {
        width:  1.1em;
        } 
      }
    }

示例 2

    #socialmedia {
      float: right;

      li {
      float: left;
        }
    }


     #socialmedia img  { 
     @include bp(mobile) {
        width:  1.1em;
      } 
}

非常感谢，

Answer 1

这取决于你所说的 "efficient" 是什么意思——如果你指的是编译后的 CSS 代码的效率，那么你的两个例子是等价的；他们都编译成相同的 CSS.

如果您指的是开发人员效率，我认为第一个示例更具可读性和可维护性（Sass 的一个不错的功能是能够在上下文中嵌套媒体查询，这就是您是做）。您的示例 1 通常是我采用的方法。

因此，回答您的问题：

这是一个完全可以接受的方法。
没有

sass 两层嵌套

sass nesting at 2 levels

css

sass