узлы, медиа-запросы и каскадные

116
11

Из-за моего смутного понимания инструментов, которые я использую, я не смог определить источник проблемы. node-sass не обеспечивает агрегирование медиа-запросов, но css-mqpacker, вот где я должен был искать решение проблемы. https://github.com/hail2u/node-css-mqpacker/issues/49.

Каким будет ваш выход из следующей ситуации.

Я объединять два частичных.scss файла путем @import ing их в базовый файл. Каждый файл имеет медиа-запросы, и они предоставляют стили для соответствующего элемента страницы.

  /* contents of index.scss */
@import "_block.scss", "_block-2.scss";

Первый файл вводит две точки останова, а порядок появления для этих точек останова в sass compiled stylesheet определяется по порядку в этом файле.

/* contents of _block.scss */
.block {
@media (max-width: 500px) {...}
@media (max-width: 450px) {...}
}

@import второго файла имеет тот же набор точек останова плюс один для max-width: 550px.

/* contents of _block-2.scss */
.block-2 {
@media (max-width: 550px) {...}
@media (max-width: 500px) {...}
@media (max-width: 450px) {...}
}

Идентичные точки останова агрегируются во время компиляции, но новый помещается в конец скомпилированной таблицы стилей, переопределяя свойства для всех точек останова для конкретного элемента, что нежелательно.

/* stylesheet compiled by sass */
@media screen and (max-width: 500px) {
.block {...}
.block-2 {...}
}
@media screen and (max-width: 450px) {
.block {...}
.block-2 {...}
}
@media screen and (max-width: 550px) {
.block-2 {...}
}

Что было бы правильным решением?

Этот пример представляет проект, в котором я не могу импортировать второй файл перед первым, потому что он вводит другие проблемы с переопределением. В конце концов я определил стиль, чтобы упорядочить все существующие точки останова и представить его на ранней стадии, но это хак, который мне совсем не нравится, поэтому мне все еще нужно элегантное решение.

Это касается меня, есть ли использование медиа-запросов, вложенных в правила CSS, если это приводит к таким последствиям. В настольном первом и мобильном первом запросе на запросы медиафайлов, но у меня нет достаточного контроля над ним даже в этом простом случае.

спросил(а) 2021-01-25T15:34:05+03:00 4 месяца, 2 недели назад
1
Решение
88

.block {
background-color: lightblue;
}
@media screen and (max-width: 500px) {
.block {
background-color: lightgreen;
}
}
@media screen and (max-width: 450px) {
.block {
background-color: lavender;
}
}

Также см. Https://www.w3schools.com/css/css_rwd_mediaqueries.asp

ответил(а) 2021-01-25T15:34:05+03:00 4 месяца, 2 недели назад
-4

Я добавил вашу текущую настройку и предлагаемое решение. Предполагается, что вам действительно нужно запустить 2 css файла в том порядке, в котором вы объяснили. Предполагается также, что вы хотите сохранить как есть, но иметь конечный результат.

Поскольку вы можете (по какой-то причине) не хотеть удалять исходные значения в CSS, вам придется установить те, которые вы не хотите использовать, прозрачные. Это исходный по умолчанию фоновый цвет.


В качестве второго шага вам нужно решить, какую максимальную ширину вы действительно хотите. Когда вы знаете, что вы можете защитить систему, используйте это, добавив "! Important".

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>

<style>

/* Current setup */
@media (max-width: 500px) {body {background-color: red}}
@media (max-width: 450px) {body {background-color: blue}}
@media (max-width: 550px) {body {background-color: green}}

/* Solution */
@media (max-width: 500px) {body {background-color: transparent}}
@media (max-width: 450px) {body {background-color: yellow !important;}}
@media (max-width: 550px) {body {background-color: transparent}}

</style>

</head>
<body>
test
</body>
</html>

ответил(а) 2021-01-25T15:34:05+03:00 4 месяца, 2 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема