有没有进行@media查询或自定义类的快捷方式？
有没有进行@media查询或自定义类的快捷方式？
提问于 2019-05-26 09:58:42
我在我的网站上有一个侧边栏，可以在较小的屏幕上折叠成更窄的侧边栏。我现在想添加一个选项，即使你在大屏幕上，也可以切换到更窄的侧边栏。假设我通过向<body>添加类.compact来完成此操作。
我的紧凑侧边栏的CSS最初是在一个@media块中：
@media(min-width: 768px) and (max-width: 1200px) {
nav {}
nav > .nav-item {}
/* ... */
}，并且现在还需要作为.compact的子级
body.compact nav {}
body.compact nav > .nav-item {}
/* ... */这将需要我复制/粘贴所有的声明来实现该行为，因为@media的语法是包装器之一，并且不能是.compact的声明的兄弟。
有没有一种不涉及javascript的不同的聪明方法来实现这一点呢？
回答 1
Stack Overflow用户
发布于 2019-05-26 12:03:06
这可以通过使用css variables来实现
function toggleSidebar(size) {
let container = document.getElementById("container");
let sibebarClass;
switch (size) {
case 'sm':
sidebarClass = 'small-sidebar';
break;
case 'md':
sidebarClass = 'medium-sidebar';
break;
case 'lg':
sidebarClass = 'large-sidebar';
break;
default:
sidebarClass = '';
}
container.classList.remove('large-sidebar', 'medium-sidebar', 'small-sidebar');
container.classList.add(sidebarClass);
}* {
box-sizing: border-box;
}
html,
body {
margin: 0;
height: 100vh;
}
.page-container {
width: 100%;
height: 100%;
display: flex;
/* This will be default value */
--sidebar-width: 300px;
}
.content {
padding: 10px;
}
/* Sidebar width is defined in this block */
.page-container.large-sidebar {
--sidebar-width: 400px;
}
.page-container.medium-sidebar {
--sidebar-width: 300px;
}
.page-container.small-sidebar {
--sidebar-width: 200px;
}
.sidebar {
height: 100%;
width: var(--sidebar-width);
background-color: limegreen;
}<div id="container" class="page-container">
<div class="sidebar"></div>
<div class="content">
<button class="toggleSidebar" onclick="toggleSidebar('sm');">Toggle small</button>
<button class="toggleSidebar" onclick="toggleSidebar('md');">Toggle medium</button>
<button class="toggleSidebar" onclick="toggleSidebar('lg');">Toggle large</button>
</div>
</div>
这样你只需要添加新的.page-container.somesize-sidebar来添加新的侧边栏大小，而不需要接触.sidebar选择器。
如果你想在不同的屏幕上使用不同的侧边栏--你可以在@media query中放入.page-container.small-sidebar和其他的东西。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56310088
复制相关文章
相似问题
腾讯云开发者
