LESS – динамический CSS

При просмотре вебинара узнал о такой замечательной вещи как 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 в Visual Studio 2013

Для преобразования LESS на стороне сервера, используя Bundle, необходимо добавить библиотеку «Bundle Transformer: LESS». Установить её можно из NuGet пакетов.

Bundle LESS

Также нужно установить движок javaScript «V8JsEngine», установить также можно из NuGet пакетов, там он называется как «JavaScript Engine Switcher for .Net: V8»

Далее, необходимо в файле Web.config в области «bundleTransformer» добавить строки:


    

Настройка V8JsEngine

Теперь нужно зайти в файл /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 может гораздо больше, более подробно можно почитать на сайте http://lesscss.ru/

Добавить комментарий