Могу ли я использовать параметры URL в LESS css?

Введение:

Я пробую МЕНЬШЕ в среде asp.net mvc.

Я использую dotless для обработки на стороне сервера (и я бы не хотел использовать обработку на стороне клиента, особенно после публикации всего проекта).

Я должен применить дизайн, в котором есть разные цветовые схемы в зависимости от разных вещей (например, времени суток).

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

Проблема:

Но мне нужно было бы как-то изменить цветовые темы из внешнего параметра.

Идеи:

Сначала я подумал, что параметр URL типа style.less?theme=fuschia был бы хорош, но я не нашел способа разобрать что-то подобное.

Тогда я подумал, что создание очень короткого blue.less, green.less, Orange.less, состоящего только из объявленных цветовых переменных и включающего main.less в каждую из них, было бы надежным решением.

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

Проблема снова в том, что я хочу контролировать некоторые вещи в моем меньшем файле извне.


asp.net-mvc less dotless
person vinczemarton    schedule 11.02.2012    source источник

Ответы (2)


arrow_upward
24
arrow_downward

Да, вы можете (потому что я реализовал эту функцию именно по этой причине).

Dotless поддерживает параметры извне через параметр строки запроса.

<link rel="stylesheet" href="style.less?foo=bar" />

Позволит вам меньше использовать следующее:

@foo = bar;

Код ввода параметров очень прост. он просто добавляет объявления переменных к вашему обычному файлу less, поэтому все, что приходит в качестве параметра строки запроса, будет следовать приведенному выше синтаксису.

Рассматриваемый код очень прост: https://github.com/dotless/dotless/blob/master/src/dotless.Core/Engine/ParameterDecorator.cs

person Tigraine    schedule 12.02.2012
comment
Это ответ, на который я надеялся! :D - person vinczemarton; 13.02.2012
comment
@Tigraine: насколько это безопасно? Злоумышленник может легко внедрить вредоносный код в таблицы стилей. - person jor; 02.06.2015
comment
Использовать это не так просто. Мне пришлось создать @import "theme-param-default.less"; над моей строкой @import "darkly-variables-@{theme}.less";, которая содержала @theme: dark;, иначе возникли проблемы с компиляцией. - person Matt Kocaj; 18.05.2017

arrow_upward
5
arrow_downward

Насколько я знаю, вы не можете передавать параметры для dotnetless, чтобы использовать их для компиляции.

В качестве предложения, почему бы просто не вызывать разные файлы less? Это было бы довольно легко сделать с помощью свойства Viewbag.

Чтобы сделать разные меньше, вы сначала создаете меньше файл с каждым набором цветов в них. Затем вы импортируете свой базовый файл CSS. dotnetless объединит определения цветов в родительском файле с использованием в базовом файле. Итак, у вас есть что-то вроде -

@baseGray: #ddd;
@baseGrayDark: darken(@baseGray, 15%);
@baseGrayLight: lighten(@baseGray, 10%);
@import "baseCss.less";

Я только что проверил это на проекте MVC3, и он работает.

person photo_tom    schedule 12.02.2012
comment
Спасибо, это тоже то, что мне нужно. Бывают случаи, когда я бы с радостью принял более одного ответа. Это один. - person vinczemarton; 13.02.2012