在SASS文件中添加媒体查询

Question

我一直在我的新项目中一起使用Bootstrap和SASS。

我刚刚加入我的SASS文件中以下行，并与Prespos编译，

@media (min-width: $screen-sm-min){ 
#myemail 
    padding-top: 20px 
} 

出人意料的是，它显示了以下错误，

Failed to compile style.sass | Error: Invalid CSS after "}": expected 1 selector or at-rule, was "{}"

13 |       padding-top: 20px

14 |   }

我试过几个解决方法和幸运的是得到了成功编译与以下代码与一个非常小的变化（刚刚移动到前一行），

@media (min-width: $screen-sm-min){ 
#myemail 
    padding-top: 20px} 

我想知道SASS的工作方式。你能解释这种行为背后的具体原因吗？

Answer 1

您忘记了左右#myemail选择器的大括号。

@media (min-width: $screen-sm-min) { 
    #myemail { 
    padding-top: 20px; 
    } 
} 

有可能是下一个媒体查询的一些表述：

@media (min-width: $screen-sm-min) { 
    .one { 
    ... 
    } 

    .two { 
    ... 
    } 

    .three { 
    ... 
    } 
} 

更重要的是，你可以在里面规则的白色媒体查询：

#myemail { 
    padding-top: ... 

    @media (min-width: $screen-sm-min) { 
    padding-top: 20px; 
    } 
}