我在我的网站上使用Bootstrap,我选择使用固定在屏幕顶部的导航栏在桌面浏览器上进行导航,这里有足够的屏幕空间。这是通过使用导航栏的.navbar-fixed-top
类在引导程序中完成的。
在较小的屏幕上虽然我更喜欢使用静态导航栏,该导航栏与页面内容的其余部分一起滚动,因为这样可以在较小的设备上保留垂直屏幕空间,而这些空间非常宝贵。
当然,我转向使用css媒体查询的明显方法:
#site-header
{
@extend .navbar, .navbar-default;
@media (max-width: $screen-xs-max) {
@extend .navbar-static-top;
}
@media (min-width: $screen-sm-min) {
@extend .navbar-fixed-top;
}
}
不幸的是,这给了我错误信息:
You may not @extend an outer selector from within @media.
You may only @extend selectors within the same directive.
基于错误消息,这似乎是SASS中非常慎重的限制。除了使用JavaScript动态应用类之外,还有其他方法吗?
基本上我的问题类似于Extending selectors from within media queries with Sass,除了我想扩展一个在库中定义的类(Bootstrap),所以我没有选择转换{{的定义1}}和.navbar-static-top
成为mixins或以任何方式更改其定义,因为目前该问题的所有现有答案都表明了这一点。
答案 0 :(得分:1)
您可以在媒体查询中编写类并扩展它们。像这样的东西
#site-header {
@extend .navbar, .navbar-default;
}
@media (max-width: 767px) {
.navbar-static-top {
position: static;
}
#site-header {
@extend .navbar-static-top;
}
}
@media (min-width: 768px) {
.navbar-fixed-to-top {
position: fixed;
top: 0;
right: 0;
}
#site-header {
@extend .navbar-fixed-to-top;
}
}