LESS CSS ознакомление

Знакомимся с LESS вместе. Обычный CSS давно устарел, а удобство LESS просто шокирует, поэтому не медлим и начинаем усовершенствовать свои стили, прямо сейчас.

Знакомимся с less вместе. Обычный CSS давно устарел, а удобство Less просто шокирует, поэтому не медлим и начинаем усовершенствовать свои стили, прямо сейчас.

Less - это препроцессор css, который делает работу с стилями более удобной и комфортной.

Почему Less?

До недавнего времени не зная функционала и принципа работы я думал что - это глупо. Тем более зачем? - если все стили можно прописать в обычном css.

После создания нескольких полноценных проектов, я разочаровался в CSS, понятно что язык предназначен для стилизации элементов и в этом он очень хорош особенно технологии CSS3 и уже первые шаги в CSS4, но вот организация кода - хромает.

Преимущества Less

Подробнее о функциях с примерами в статье Основные функции языка Less

  • Организация кода
  • Использование переменных
  • Примешивания
  • Вложения
  • Вычисления
  • Функции
  • и др.

Как работает Less

Less код конвертируется в обычный CSS код. Например вы пишите код на Less используя все его преимущества, он обрабатывается вручную или автоматически, в обычный css код.

Автоматически - файл .less напрямую подключается к сайту, где конвертируется скриптом.

Вручную - код конвертируется вручную при помощи редактора или специальных утилит.

Пример less кода

Предположим у нас есть код на .less с использованием переменных, примешиваний, вложений. До преобразования выглядит следующим образом:

@font-size: 16px;
@color-red: red;

.box-shadow(@style, @color) when (iscolor(@color)) {
    -webkit-box-shadow: @style @color;
    box-shadow: @style @color;
}

.line{
    width:200px;
    height:100px;
    .box-shadow(0 0 5px, rgba(0,0,0,.3));
    .captions{
        font-size: @font-size;
    }
    h1, h2, h3 {
        color: @color-red;
        font-size: @font-size;
    }
}

Полученный Css код после преобразования:

.line {
    width: 200px;
    height: 100px;
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.line .captions {
    font-size: 16px;
}
.line h1,
.line h2,
.line h3 {
    color: red;
    font-size: 16px;
}

Как подключить и использовать Less

Для подключения, стоит выбрать способ подключения, написать или переписать стили и подключить, разметив код между тегами
<head></head>

По организации кода в системе uCoz всё тоже самое, причём вы можете все стили из /st/_my.css адаптировать под less. Сделать это можно несколькими способами, но перед началом незабудьте сделать BACKUP шаблонов.

Автоматический способ

Шаг 1. Перепишите ваши стили в Less, и загрузите с помощью файлового менеджера все .less файлы к себе на сайт.

Шаг 2. Поле того когда стили вам не нужны, перейдите в шаблон "Таблица стилей CSS" и удалите весь код.

Шаг 3. Перейдите в шаблон "Верхняя часть сайта" и вставьте свой код. Например:

<link rel="stylesheet/less" type="text/css" href="/css/main.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js" type="text/javascript"></script>

/css/main.less — ссылка на ваш .less файл.

Теперь для изменения, вы можете просто загружать новый .less файл заменяя старый.

Ручной способ

Конвертировать LESS ручным способом можно по разному, либо подключить плагин в ваш редактор кода (WeBuilder, NotePad++, Brackets, Sublime Text и др.), воспользоваться отдельной программой или онлайн сервисом. После конвертации, подключить стили к сайту обычным способом.

<link rel="stylesheet" type="text/css" href="site.css">

Шаг 1. Перепишите ваши стили в LESS, сконвертируйте в CSS.

Шаг 2. Перейдите в шаблон "Таблица стилей CSS" и замените весь код, на полученный.

Для изменения при данном способе, нужно постоянно конвертировать и заменять вручную весь код.

Комментарии - 0
для добавления комментария
пожалуйста войдите или зарегистрируйтесь
Хостинг от uCoz