<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

В рамках упражнений курса Вы параллельно со мной будете создавать свою большую программу на Java, что даст Вам необходимую практику, после которой для Вас уже не будет разницы, какого размера создавать программы.

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Что такое LESS?

Что такое LESS?

Всем привет! Сегодня мы поговорим о том, что такое less.js и как его использовать.

Возможно, вы слышали такое выражение: "Препроцессоры CSS"? Вот сегодня мы разберём один из них - LESS.

Зачем нужен LESS?

LESS помогает добавить новые возможности, сделать ваш код более красивым и гибким. Препроцессоры немного похожи на языки программирования: там есть переменные, функции, операции и т.д. Представим, что у вас есть много всяких блоков, у которых свой цвет, и со временем вы решили сменить цвет сайта. На чистом CSS это может быть очень затруднительным, когда на LESS вы можете поместить цвета в переменные, которые затем использовать в блоках, и, если вы захотите сменить цвет, то вам нужно будет его поменять лишь в одной переменной. После того, как ваш код на LESS будет написан, вы сможете скомпилировать его в CSS и вставить себе на сайт.

Начало работы

Для начала скачайте библиотеку less.js с сайта http://lesscss.org/

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>less.js</title>
  <link rel="stylesheet" href="style.less">
  <script src="less.js"></script>
</head>
<body>
  <div id="container">
   <div id="nav">
    <ul>
     <li><a href="#">Главная</a></li>
     <li><a href="#">Документация</a></li>
     <li><a href="#">Обучение</a></li>
     <li><a href="#">Скачать</a></li>
     <li><a href="#">Контакты</a></li>
    </ul>
   </div>
  </div>
</body>
</html>

Структура простая: нумерованный список, который будет нашим меню. Но заметьте, что в теге head мы подключаем скачанный с сайта less.js, а все стили для него мы будем писать в файле style.less, который также подключаем.

Пишем стили. Файл style.less

@mainColor: #233A59;
@mainColor2: lighten(@mainColor, 30%);
@textColor: #f7f7f7;

div#nav {
  ul {
   li {
    list-style: none;
    a {
     text-decoration: none;
     font-family: verdana;
     font-size: 14px;
     color: @textColor;
     float: left;
     padding: 15px 30px;
     border-right: 1px solid fadeout(@textColor, 60%);

     .gradient(@mainColor2, @mainColor);
    }
   }
  }
}

.gradient(@col, @col2) {
  background-color: @col;
  background-image: gradient(linear, left top, left bottom, from(@col), to(@col2));
  background-image: linear-gradient(top, @col, @col2);
}

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

Во-первых, с помощью такого синтаксиса: @name создаются переменные в less. Мы можем записать туда, что хотим. В нашем случае у нас есть переменные mainColor и textColor, которые хранят цвет для нашего меню и текста и переменная mainColor2, где, заметьте, мы используем функцию lighten, которая помогает осветлить наш цвет. В нашем случае осветление будет 30%

Следующее отличие - вложенность. Заметили, что мы не пишем div#nav, затем #div#nav ul и так далее, а вкладываем наш список, ссылку и прочее внутрь. Удобно, правда?

Чтобы сделать градиент, мы создали свою собственную функцию, которая выглядит как класс и называется .gradient. Она принимает 2 параметра и использует их для того, чтобы создать градиент. Вызываем мы её в нашей ссылке, куда передаём переменные @mainColor и @mainColor2. Ещё одна функция, которую мы используем в ссылке - fadeout. Она позволяет снизить прозрачность. Мы выбрали значение 60%

Компиляция в CSS

Сейчас у нас всё прекрасно работает, но заливать файлы на сервер в таком виде не стоит. Почему? Потому, что у человека в браузере может быть отключён JavaScript, и тогда наши стили уже не сработают. Поэтому less лучше всего использовать при разработке, а когда всё уже готов, скомпилировать в css и уже его заливать на сервер. Для этого есть, например, онлайн компиляторы. Один из них - http://leafo.net/lessphp/ Вставьте слева less код, а затем нажмите compile. Справа вы увидете готовый css код.

Итак, сегодня мы разобрались, что такое less и как его использовать. Увидимся в следующей статье.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

kruty kruty 17.05.2014 15:57:11

javascript виключає мало хто, але процес компіляції дуже важкий - тому краще скомпілювати і викласти. Бо навіть на нормальних комп'ютерах любить тормозити, а ,що казати про різні Пентіуми... Я рекомендую для компіляції simpless

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.