Question

我正在使用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;
      } 
}

非常感谢，

Answer 1

这取决于你的意思＆＃34;高效＆＃34; - 如果你指的是编译的CSS代码的效率，你的两个例子都是等价的;他们都编译成相同的CSS。

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

所以，回答你的问题：

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

sass在2级嵌套

1 个答案: