Избегайте нескольких @media при использовании Bootstrap на 3 миксина меньше

При использовании меньшего количества миксинов для создания веб-сайта с помощью Bootstrap я делаю что-то вроде этого:

#logo {
   .make-sm-column(3);
   .make-md-column(3);
   .make-lg-column(3);
}
#menu {
       .make-sm-column(5);
       .make-md-column(5);
       .make-lg-column(5);
    }

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

@media (min-width: 768px) {
      #logo {
        float: left;
        width: 25%;
      }
    }
    @media (min-width: 992px) {
      #logo {
        float: left;
        width: 25%;
      }
    }
    @media (min-width: 1200px) {
      #logo {
        float: left;
        width: 25%;
      }
    }
    @media (min-width: 768px) {
      #menu {
        float: left;
        width: 41.66666666666667%;
      }
    }
    @media (min-width: 992px) {
      #menu {
        float: left;
        width: 41.66666666666667%;
      }
    }
    @media (min-width: 1200px) {
      #menu {
        float: left;
        width: 41.66666666666667%;
      }
    }

Это повторяется для каждого класса / идентификатора с примесью столбца. Думаю, было бы элегантнее и эффективнее объединить эти определения в 3 блока медиа-запросов.

Есть ли способ сделать это (полу) автоматически. Я использую Windows и компилирую с WinLess в данный момент, но не нашел такой опции.


css twitter-bootstrap less mixins
person herrmarek    schedule 16.12.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

В текущей версии Bootstrap есть .make-xs-column mixin, это генерирует тот же CSS без каких-либо медиа-запросов.

person seven-phases-max    schedule 16.12.2013
comment
Миксин .make-xs-column не добавляет медиа-запросы, потому что bs3 в первую очередь является мобильным. Но это не моя проблема: мне нужны медиа-запросы, потому что мне нужен адаптивный макет, но я хочу, чтобы они были сосредоточены в 3-х блоках, а не разбросаны по css десятки / сотни раз. - person herrmarek; 17.12.2013
comment
Но какой смысл иметь точно один и тот же код в селекторе для каждого медиа-запроса? Обратите внимание, что все три функции make генерируют абсолютно идентичный код независимо от значения min-width (т.е. эти медиа-запросы не влияют на значения float и width, поэтому замена этих трех вызовов .make одним вызовом .make-xs даст вам то же самое. результат без вздутия СМИ). - person seven-phases-max; 17.12.2013
comment
В любом случае, вы ничего не можете с этим поделать - именно так пишутся эти миксины (то есть, как только медиа-запрос генерируется вызовом миксина (например, .make-sm-column(3);), вы не можете объединить его с медиа-запросами, сгенерированными другим расширением миксина (например, .make-sm-column(5);). Вероятно, вы могли бы объединить его с некоторыми другими инструментами постобработки (например, с одним из минификаторов CSS), но я не знаю, действительно ли они способны на это. - person seven-phases-max; 17.12.2013
comment
Другой способ - просто написать свои собственные make-column миксины, которые справятся со всем этим должным образом ™, это не слишком сложно, но это будет означать, что вам придется проверять / обновлять свой код каждый раз, когда обновляется BS. - person seven-phases-max; 17.12.2013
comment
Окей, максимум семи фраз, вы меня убедили. Я собираюсь использовать make-xs-column и вручную создавать медиа-запросы. - person herrmarek; 17.12.2013
comment
@ seven-phase-max взгляните на gulp-comb-media-query, есть также версия grunt - person darronz; 10.03.2015
comment
@darronz Да, я знаю об инструментах слияния медиа-запросов. Но вопрос (по крайней мере, как он написан) заключался просто в том, чтобы создать столбец, который будет работать одинаково на любом экране, поэтому он вообще не нуждается в каких-либо медиа-запросах. - person seven-phases-max; 10.03.2015

arrow_upward
1
arrow_downward

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

#logo {
   .make-sm-column(3);
}
#menu {
   .make-sm-column(5);
}

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

person jamespaden    schedule 28.03.2014