Bourbon Neat 在媒体查询中忽略 'omega'
Bourbon Neat ignoring 'omega' in media query
我目前正在使用 Bourbon Neat。我需要 .posts__post
在平板电脑上跨越 3 列 6 列 ,然后在台式机及更高版本上跨越 2 of 6。但是我发现我的桌面媒体查询不工作,平板电脑查询仍然通过桌面。
_grid.scss
$tablet: em(768);
$desktop: em(960);
// Breakpoints
$tablet: new-breakpoint(min-width $tablet 6) ;
$desktop: new-breakpoint(min-width $desktop 6);
posts.scss
@include media ($tablet) {
.posts__post{
@include span-columns(3 of 6);
@include omega(2n);
}
}
@include media ($desktop) {
.posts__post{
@include span-columns(2 of 6); // only spans up to 4 columns in total
@include omega(3n); // still remains as 2n
}
这是我要为 [桌面][1.不知道我做错了什么。如果尊重 $desktop 媒体查询中的 omega(3n),则可以解决此问题,但它不会并保持为 2n。
问题是当 $desktop 媒体查询生效时,它不会撤消 $tablet omega mixin。所以在 $desktop 你的 :nth-child(3n)
没有右边距并且 3n+1
被左边清除,但是 2n
仍然没有右边距并且 2n+1
仍然被左边清除。
您可能需要编辑媒体查询以在 $tablet 查询中也包含一个 max-width
值。使用 em()
mixin 并没有那么痛苦,因为你可以做类似的事情:
$tablet: em(768);
$tablet-max: em(959);
$desktop: em(960);
如果您继续将媒体查询变量命名为与断点宽度相同的名称,事情可能会变得混乱,因此我建议使用类似 $mq-tablet
.
的名称
或者,您可以将 Flexbox 和 span-columns()
与 "block-collapse" 显示器 属性 一起使用。根据您的设计,这可能需要对标记进行一些额外的调整。
总的来说,请包括问题的完整工作演示以帮助解决问题。
我目前正在使用 Bourbon Neat。我需要 .posts__post
在平板电脑上跨越 3 列 6 列 ,然后在台式机及更高版本上跨越 2 of 6。但是我发现我的桌面媒体查询不工作,平板电脑查询仍然通过桌面。
_grid.scss
$tablet: em(768);
$desktop: em(960);
// Breakpoints
$tablet: new-breakpoint(min-width $tablet 6) ;
$desktop: new-breakpoint(min-width $desktop 6);
posts.scss
@include media ($tablet) {
.posts__post{
@include span-columns(3 of 6);
@include omega(2n);
}
}
@include media ($desktop) {
.posts__post{
@include span-columns(2 of 6); // only spans up to 4 columns in total
@include omega(3n); // still remains as 2n
}
这是我要为 [桌面][1.不知道我做错了什么。如果尊重 $desktop 媒体查询中的 omega(3n),则可以解决此问题,但它不会并保持为 2n。
问题是当 $desktop 媒体查询生效时,它不会撤消 $tablet omega mixin。所以在 $desktop 你的 :nth-child(3n)
没有右边距并且 3n+1
被左边清除,但是 2n
仍然没有右边距并且 2n+1
仍然被左边清除。
您可能需要编辑媒体查询以在 $tablet 查询中也包含一个 max-width
值。使用 em()
mixin 并没有那么痛苦,因为你可以做类似的事情:
$tablet: em(768);
$tablet-max: em(959);
$desktop: em(960);
如果您继续将媒体查询变量命名为与断点宽度相同的名称,事情可能会变得混乱,因此我建议使用类似 $mq-tablet
.
或者,您可以将 Flexbox 和 span-columns()
与 "block-collapse" 显示器 属性 一起使用。根据您的设计,这可能需要对标记进行一些额外的调整。
总的来说,请包括问题的完整工作演示以帮助解决问题。