响应式 SASS 工作流程 [关闭]答案

【问题标题】：Responsive SASS workflow [closed]响应式 SASS 工作流程 [关闭]
【发布时间】：2013-08-29 09:45:47
【问题描述】：

我想知道您是如何在 SASS 中处理结合 SCSS 的响应式设计的。主要问题是关于媒体查询。

1) 您是否使用断点混合直接在样式元素内编写媒体查询，如下所示：

.element{

     width:40%;

     @media screen (min-width:700px){
           width:100%;
     }

     @media screen (min-width:1000px){
           width:50%;
     } 

}

// CSS

@media screen (min-width:700px){
    .element{
        width:100%; 
    }
 }

 @media screen (min-width:700px){
    .element2{
        width:50%; 
    }
 }

2) 还是您将它们写入特殊的单独部分文件？比如这样：

/* _responsive_wide_screen.scss */

@media screen (min-width:1000px){

    .element{
        width:50%;
        display:inline-block;
    }   

   .element2{
        width:20%;
    }

 }

更快的操作可能是第 1 个示例，但问题是为每个元素生成媒体查询语句并且 CSS 文件大小越来越大。我应该避免这种方法吗？

我使用的是 2 号示例，但有时在文件之间切换不是那么用户友好。谢谢

【问题讨论】：

标签： css responsive-design workflow sass media-queries

【解决方案1】：

我自己的偏好是使用您展示的第一种方法。我喜欢它在将媒体查询本地化到特定元素方面提供的好处；我发现它加快了响应式工作流程，并鼓励在设计/布局需要的地方进行调整，而不仅仅是在特定的断点处。

对于值得花费额外时间的大型项目，然后我会使用相同的 min-width 和 max-width 值来处理并合并媒体查询。必须进行二次优化当然是这种方法的一个缺点——我希望即将发布的 Sass 版本能够为我们自动执行此功能。

【讨论】：