При просмотре вебинара узнал о такой замечательной вещи как LESS. LESS является надстройкой над CSS, которая позволяет добавить многое динамические элементы в CSS код. Порог вхождения в LESS очень низкий, так как CSS файл будет являться работоспособным LESS файлом, но дополнительные элементы, добавленные в LESS не будут работать в обычном CSS.
Есть 2 способа использования LESS: преобразование LESS в CSS на стороне клиента, используя javaScript, или преобразование LESS файла в CSS на стороне сервера, с передачей клиенту уже готового CSS файла. В каждом способе есть свои плюсы и минусы.
На мой взгляд, лучше всего преобразовывать LESS на стороне сервера, так как это снимает необходимость загрузки лишних файлов.
Использование LESS в ASP.NET:
В целом я был удивлён, что в VStudio 2013 “из коробки” поддерживается создания LESS файлов.
Для преобразования LESS на стороне сервера, используя Bundle, необходимо добавить библиотеку «Bundle Transformer: LESS». Установить её можно из NuGet пакетов.
Также нужно установить движок javaScript «V8JsEngine», установить также можно из NuGet пакетов, там он называется как «JavaScript Engine Switcher for .Net: V8»
Далее, необходимо в файле Web.config в области «bundleTransformer» добавить строки:
Теперь нужно зайти в файл /App_Start/BundleConfig.cs и добавить следующий код:
var less = new Bundle("~/Content/less")
.Include("~/Content/*.less");
bundles.Add(less);
Как можно увидеть, я подгружаю все файлы с расширением less из каталога /Content/. Теперь можно отобразить стиль на нужной странице, для отображения стилей на странице нужно в блок head вставить код @Styles.Render("~/Content/less")
После этого можно писать код в LESS файлы.
Для преобразования LESS на стороне клиента необходимо подключить на страницу LESS файл, а затем javaScript файл для его преобразования.
После этого при загрузке страницы код из LESS файла будет преобразовываться в обычный CSS.
Чем же мне так понравился LESS. Вот что он умеет:
Переменные.
Да, именно, в LESS можно использовать переменные!
Например, следующий код:
@color:#4D926F;
div {
color:@color;
}
#footer {
color:@color;
}
Будет преобразован в:
div {
color: #4d926f;
}
#footer {
color: #4d926f;
}
Можно определять переменные, с повторяющимися параметрами, а затем использовать их в любом месте таблице стилей.
Перемешивание:
Перемешивание позволяет сократить дублирование кода, путём включение всех свойств одного класса в другой.
.text(@fontSize:20px) {
font-size:@fontSize;
padding-left:20px;
}
#header {
.text;
}
#footer {
.text(16px);
}
Будет преобразован в:
#header {
font-size: 20px;
padding-left: 20px;
}
#footer {
font-size: 16px;
padding-left: 20px;
}
Вложенные правила:
Вместо того, чтобы тратить время и описывать длинные селекторы для указания наследования, в LESS можно вкладывать селекторы друг в друга. Код LESS при этом повторяет DOM и становится более понятным!
#header {
color: red;
p {
font-size: 20px;
padding-left: 20px;
}
div {
font-size:14px;
}
}
Преобразуется в:
#header {
color: red;
}
#header p {
font-size: 20px;
padding-left: 20px;
}
#header div {
font-size: 14px;
}
А еще можно сделать так:
#header {
color: red;
&.text {
font-size: 20px;
padding-left: 20px;
}
&.centerText {
text-align:center;
font-size:14px;
}
}
Что даст на выходе:
#header {
color: red;
}
#header.text {
font-size: 20px;
padding-left: 20px;
}
#header.centerText {
text-align: center;
font-size: 14px;
}
Функции и операции:
В LESS есть возможность производить манипуляции над переменными, это очень удобно, когда на странице встречаются пропорциональные элементы.
@textSize:10px;
@border:1px;
#header {
font-size:@textSize;
border:@border;
}
#footer {
font-size:@textSize * 2;
border:@border * 2;
}
Даст на выходе:
#header {
font-size: 10px;
border: 1px;
}
#footer {
font-size: 20px;
border: 2px;
}
Это основы, LESS может гораздо больше, более подробно можно почитать на сайте