CSS-избыточность при использовании LESS и его @import - PullRequest
Новая
       30

CSS-избыточность при использовании LESS и его @import

16 голосов
/ 25 января 2010

Мне очень нравится идея и концепция МЕНЬШЕ . Тем не менее, я наткнулся на ошибку, о которой я сообщил автору довольно давно, но пока не получил никакой обратной связи. Может быть, только я делаю что-то не так.

Мой application.less -Файл, который выглядит примерно так: 

@import "reset";
@import "config";
@import "header";
@import "forms";
[…]

Мне нравится, что можно использовать правило @import, чтобы разделить мои файлы, чтобы получить лучший обзор моих css-объявлений. Тем не менее, каждый импортированный файл должен повторно импортировать config.less-File снова , чтобы иметь возможность использовать миксины и переменные, которые я там определил.

Могу поспорить, что вы уже знаете о том, к какой избыточности я обращаюсь: Каждый раз, когда config.less импортируется, его «вывод» становится частью application.css.

Мой конфигурационный файл содержит около 200 строк кода. Поскольку я разделил свой CSS-файл примерно на 5 файлов (на основе имен моих контроллеров), которые необходимо повторно импортировать в конфигурацию, я получил около 1000 строк сгенерированного CSS-кода, которые на 100% избыточны.

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

Ответы [ 4 ]

12 голосов
/ 26 января 2010

Хотя это и не идеально, практическая причина этого заключается в том, что теоретически файлы, которые вы импортируете, не должны содержать CSS. Как правило, у вас есть переменные и динамические миксины, которые не влияют на ваш вывод CSS:

lib.less: 

#colors {
    @blue: #0011ff;
    @red: #ee2222;
}
.button (@width: 10px) {...}

main.less: 

@import "lib";

a { color: #colors[@blue]; }

вывод, main.css: 

a { color: #0011ff; }

#colors {} and .button не будет выводиться в этом случае.

3 голосов
/ 30 октября 2012

LESS теперь поддерживает @import-once "stylename.less";

0 голосов
/ 16 декабря 2010

Вы можете использовать динамические миксины в вашем конфигурационном файле LESS, если они объявлены и смешаны с использованием $ вместо ..

В config.less: 

$mixin
{
  a { color: @light; }
  h2 { //etc.
}

В header.less: 

@import "config";
.header
{
  $mixin;
}

Источник . Я также попробовал это, и это работает.

0 голосов
/ 25 января 2010

Может быть, вы можете разделить их в своей среде разработки, а затем объединить их, не требуя дополнительного кода при развертывании на вашем живом веб-сервере?

...