css - Sass 两层嵌套

Question

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

但是，当视口(viewport)为移动尺寸时，我需要更改社交媒体 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

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

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

因此，在回答您的问题时:

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