[ELMA4] Less

Less – это динамический язык стилей, расширяющий стандартные возможности css. Этот язык позволяет создавать и использовать переменные, писать миксины (примеси), использовать функции и операции, а также писать вложенные стили.

С переходом на less старые css стили остались в тех же местах, но изменили свое расширение на less.

Замена css на less

Для замены файла css на less необходимо:

1. Переименовать расширение файла с css на less. Учтите, что при обычном переименовании история git может быть утеряна, воспользуйтесь утилитами и командами git. Переименование файла желательно делать в отдельном коммите.

2. Заменить регистрацию css файла на less в зависимости от того, как было сделано раньше:

• если файл css регистрировался через RegisterCssSrc, то его необходимо заменить на RegisterLessSrc и вторым аргументом указать AreaName, например:

//  было:
Html.RegisterCssSrc("SomeStyles.css");
//  стало:
Html.RegisterLessSrc("SomeStyles.less", RouteProvider.AreaName);

• если файл css регистрировался через Url.Content или Html.LinkCss, то теперь необходимо воспользоваться методом LinkLess с указанием AreaName, например:

//  было:
Url.Content("SomeStyles.css")
//  стало:
Url.LinkLess("SomeStyles.less", RouteProvider.AreaName, null);
//  или для html:
Html.LinkLess("SomeStyles.less", RouteProvider.AreaName);

• во всех остальных случаях стоит рассмотреть существующие методы регистрации less, при этом удалив регистрацию css файла.

Регистрация файлов less

Импорт в less файлах

Вы можете импортировать less стили в другом less файле.

Пример импорта less файла:

@import "SomeStyles.less";

Если импортируемый стиль находится в другом модуле, то сначала необходимо указать его AreaName через @ перед названием файла стиля.
При этом нельзя импортировать стиль из другого модуля, если в проекте нет ссылки на другой модуль.
Пример:

@import "@EleWise.ELMA.SDK.Web/SomeStyles.less";

index.less

В папке Content web-модулей располагается файл index.less. Если необходимо зарегистрировать стили на всех страницах, стоит добавить импорт стилей в этот файл. Если данного файла не существует в проекте, то необходимо создать файл index.less в папке Content web-модулей и реализовать точку расширения ILayoutLessSourceProvider.

Хэлперы

HtmlHelper.LinkLess – создает элемент <link> для less стилей. Параметры:

• src – путь до less файла, обязательно с указанием расширения;
• zone – зона точки расширения, в которой располагается файл стилей.

HtmlHelper.LinkLess – создает элемент <link> для less стилей. Параметры:

• src – путь до less файла, обязательно с указанием расширения;
• zone – зона точки расширения, в которой располагается файл стилей;
• htmlAttributes – html-атрибуты для элемента, может быть null.

UrlHelper.LinkLess – создает элемент <link> для less стилей. Параметры:

• src – путь до less файла, обязательно с указанием расширения;
• zone – зона точки расширения, в которой располагается файл стилей;
• htmlAttributes – html-атрибуты для элемента, может быть null.

HtmlHelper.RegisterLessSrc – зарегистрировать less файл стилей на одной странице. Параметры:

• src – путь до less файла, обязательно с указанием расширения;
• zone – зона точки расширения, в которой располагается файл стилей.

Точки расширения

Существует несколько точек расширения, которые позволяют зарегистрировать less файлы.

ILayoutLessSourceProvider – это точка расширения, которая регистрирует less файлы на всех страницах. Эта точка расширения позволяет зарегистрировать стили для конкретных модулей. Используется для регистрации файлов index.less в модулях. Пример реализации ILayoutLessSourceProvider для регистрации стилей index.less:

/// <summary>
/// Регистрация стилей для модуля
/// </summary>
[Component]
internal class SomeModuleLessSourceProvider : ILayoutLessSourceProvider
{
   /// <summary>
   /// Зона модуля, например "EleWise.ELMA.SomeModule.Web"
   /// </summary>
   public string Area
   {
      get
      {
            return RouteProvider.AreaName;
      }
   }

   /// <summary>
   /// Путь до директории со стилями .less, например "~/Modules/" + AreaName + "/Content/"
   /// </summary>
   public string ContentPath
   {
      get
      {
            return RouteProvider.ContentFolder;
      }
   }

   /// <summary>
   /// Имя импортируемого файла
   /// </summary>
   public string FileName
   {
      get
      {
            return "index.less";
      }
   }
}

IThemeLessSourceProvider – это точка расширения, которая позволяет регистрировать файлы стилей для настройки цветовой схемы. Применяется для изменения системных цветов и задания пользовательской цветовой схемы.

Использование переменных цветовой схемы

Существует два файла с переменными цветов: Colors.less и SystemColors.less. Запрещается задавать цвета явно. В SystemColors.less расположены переменные цветовой схемы. По возможности все цвета следует задавать этими переменными. Цвета в файле сгруппированы по области и применению. Пример:

.some-style-block: {
   //  bad
   background-color: white;
   //  good
   background-color: @block-background-color;
}

В Colors.less находятся все цвета, которые можно задавать в файлах стилей. Если ни один цвет из SystemColors не подходит, то нужно объявить переменную в начале файла, присвоить ей значение переменной из Colors.less, а затем использовать объявленную переменную в качестве цвета. Пример:

@some-style-text-color: @green--400;

.some-style: {
   color: @some-style-text-color;
}

Обновление с ELMA3 на ELMA4

При обновлении с ELMA3 на ELMA4 необходимо:

• переименовать css в less по инструкции выше;
• заменить все цвета на переменные цветовой схемы SystemColors.less или цвета из Colors.less.