Есть ли сокращенный способ выполнения запроса @media ИЛИ пользовательский класс? - PullRequest
Новая
       6

Есть ли сокращенный способ выполнения запроса @media ИЛИ пользовательский класс?

0 голосов
/ 26 мая 2019

У меня на сайте есть боковая панель, которая на меньшем экране сворачивается в более узкую. Я хотел бы добавить опцию, чтобы иметь возможность переключаться с более узкой боковой панели, даже если вы находитесь на большом экране. Допустим, я делаю это, добавляя класс .compact к <body>.

Мой 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 Ответ

0 голосов
/ 26 мая 2019

Этого можно достичь с помощью переменных css : 

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.

Если вам нужны разные размеры боковой панели для разных экранов - вы можете поместить .page-container.small-sidebar и другие внутри запроса @media.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...