css - 2个级别的无聊嵌套

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

但是，当视口处于移动尺寸时，我需要更改socialmedia 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;
      }
}

非常感谢，

最佳答案

这取决于您所说的“有效”的含义—如果您指的是已编译的CSS代码的效率，则两个示例都是等效的。它们都编译成相同的CSS。

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

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


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