加载Sass媒体查询的部分顺序

我正在基于Bootstrap和Sass的网站上工作，我在“main.scss”文件的开头部分导入partials，但对于媒体查询，这意味着我必须重新编写代码以用于媒体以来的某些断点首先加载查询，然后加载其余的页面样式。对于例如为：

// _media_queries.scss (loaded first) 

@media(max-width:767px) { 
    .vertical_switch{ 
     width:100%; 
     padding: 0; 
    } 
} 

// main.scss (loaded second - overrides mobile breakpoint) 
.vertical_switch{ 
    width: 50%; 
    padding: 20px 0; 
}

我SCSS进口：

// Imports 

@import '_mixins'; 
@import '_preloader'; 
@import '_media_queries'; 

// Rest of the page styles

它是在最后加载媒体查询是一个好主意/最佳做法？在一个单一的Sass文件中，我会这样做，但我想知道如何解决这个处理partials的问题。

来源

2017-08-09 Mauritius D' Silva

我通常基于组件设置我的'偏好'。我不需要使用媒体查询的单独文件，只需将它们保留在同一个组件中即可。比方说，我有一个导航组件，我顶嘴看起来是这样的：

.nav { 
    width:100%; 
    padding: 0; 
    @media(min-width:767px) { 
     width: 50%; 
     padding: 20px 0; 
    } 
}

我相信这可以让更多的可读性和易于维护/缩放

来源

2017-08-09 07:41:01 Maarten

我之前已经试过这一点，增加了批量该文件由于重复的断点重新分配样式。但是，在一个文件中，所有样式都位于一个@media {}块中。 –

是的，这是一个偏好问题。我尝试了两种，并坚持以上。你是什么意思，“由于重复的断点重新分配样式，文件大量增加”？不知道你在这里想说什么。 – Maarten

例如：如果对于每次更改@media {}将被写入的移动断点发生50个css更改，则会在该文件中添加50个其他@media块。 –

加载Sass媒体查询的部分顺序

回答

相关问题