LESS CSS задает переменные в запросе на медиа?

Я работаю над сайтом, предназначенным для iPad. Чтобы мой сайт работал как на сетчатом дисплее iPad, так и на старых версиях iPads, я хочу установить переменную в LESS CSS в медиа-запросе, например:

@media all and (max-width: 768px) {
    @ratio: 1;
}

@media all and (min-width: 769px) {
    @ratio: 2;  
}

Итак, когда вы устанавливаете что-либо в пикселях, вы можете сделать

width: 100px * @ratio;

Но я получил ошибку компиляции, говоря, что @ratio не определен. Возможно ли иметь обходное решение, чтобы заставить его работать? Спасибо.

Ответ 1

Было бы неплохо, но сделать это невозможно.

LESS компилирует ваши медиа-запросы в реальные медиа-запросы, поэтому во время компиляции не указывается, какой медиа-запрос будет иметь отношение к браузеру.

После времени компиляции у вас будет только CSS, и вы не сможете больше иметь переменные.

Вы можете сделать это вместо этого, но это не так элегантно:

@base_width: 100px;

@media all and (max-width: 768px) {
    .something {
        width: @base_width;
    }
}

@media all and (min-width: 769px) {
    .something {
        width: @base_width * 2;
    }
}

Ответ 2

Я знаю, что опаздываю с моим ответом, но кто-то может найти это полезным.

Вы можете переместить стили в отдельный файл

// styles.less
.foo {
  width: 100px * @ratio;
}

И затем импортируйте файл несколько раз после изменения значений переменных

// main.less
@ratio: 1; // initial value

@media all and (max-width: 768px) {
  @ratio: 1;
  @import (multiple) "styles";
}

@media all and (min-width: 769px) {
  @ratio: 2;
  @import (multiple) "styles";
}

Обратите внимание, что здесь важно (несколько)

Скомпилированный код будет выглядеть следующим образом:

// main.css
@media all and (max-width: 768px) {
  .foo {
    width: 100px;
  }
}
@media all and (min-width: 769px) {
  .foo {
    width: 200px;
  }
}

Ответ 3

Для тех, кто может разрешить поддержку только относительно современных браузеров (Chrome 49+, FF 31+, нет IE), вы можете вместо этого использовать переменные css.

Вот таблица поддержки браузера от "Могу ли я использовать".

html {
    --width-var: 300px;

    @media only screen and (max-width: 750px) {
        --width-var: 200px;
   }
}

.your-class {
    max-width: calc( var(--width-var) * 2 );
    .... // tons of other props
}

С помощью приведенного выше кода всякий раз, когда экран становится меньше, чем 750px, свойство max-width из .your-class пересчитывается (так как --width-var изменяется), и, конечно, когда размер экрана изменяется, чтобы быть большим - переменная css возвращается к своей первоначальной стоимости.

Ответ 4

Это немного хакерское, но возможное решение - установить размер шрифта для элемента-оболочки и установить все единицы на em:

HTML:

<div id="wrap">
    <div class="child1"></div>
    <div class="child2"></div>
</div>

LESS:

#wrap 
    {
    font-size: 100px;
    width: 10em; // = 1000px;
    @media all and (max-width: 768px)
        {
        font-size: 60px;
        }
    .child1
        {
        width: 5em; // 500px normally, 300px on small screens
        }
    .child1
        {
        width: 2.5em; // 250px normally, 150px on small screens
        }
    }

Это, конечно, не работает, если у вас есть элементы, содержащие текст и дети.

Ответ 5

LESS в настоящее время не может этого сделать, хотя для этого было бы технически возможно. Эта функция была запрошена в выпуске GitHub под названием Меньшие переменные в медиа-запросах.

Ответ 6

Я нашел, что принятое решение не работает, поскольку компилятор будет жаловаться, что mixin не определен. Альтернативное решение:

@base_width: 100px;

.mixin {
    width: @base_width;

    @media all and (min-width: 769px) {
        width: @base_width * 2;
    }
}

Ответ 7

У меня была переменная LESS, которую я использовал везде, в том числе в вычислениях. Для меня переменная должна быть гибкой и изменяться в зависимости от ширины экрана, иначе все вычисления придется дублировать и либо использовать другую переменную, либо выполнить другое вычисление.

Это то, что я сделал, и теперь одна и та же переменная работает правильно везде, где она используется.

Он устанавливает переменную в CSS и изменяет ее, когда javascript добавляет условный класс. Переменная LESS вызывает переменную CSS.

IE 11 не поддерживает, так что будьте осторожны.

/* CSS var sets the width for normal screen size */
:root {
  --side-nav-width: 252px;
}

/* change the CSS var under conditions
   I think it would work in a media query but didn't test */
.side-nav-closed {
  --side-nav-width: 72px;
}


/* The LESS var correctly invokes whichever width applies */
@side-nav-width: var(--side-nav-width);

Ответ 8

С меньшим значением мы можем определить переменные для медиа-запроса.
прежде всего, определить разрешение iPad:

@iPad: ~"only screen and (min-width: 40.063em) and (max-width: 64em);

Они эквивалентны 641px и 1024px.

Теперь обнаружите высокое разрешение:

@highResolution: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
          ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
          ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
          ~"only screen and (min-device-pixel-ratio: 1.5)";

Теперь мы можем объединить эти 2 переменные в медиа-запросе следующим образом:

@media @iPad, @highResolution{ .yourCssClass{} }

это будет справедливо только на iPad (или аналогичных разрешениях) с отображением сетчатки (или подобной плотностью пикселей).