<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

Препроцессор LESS, начиная с простого

Препроцессор LESS, начиная с простого

И когда же наконец-то эти разработчики успокоятся и перестанут издеваться над новичками!? Не успел я ещё до конца разобраться с CSS, а мне говорят: "Все настоящие верстальщики уже давно перешли на препроцессоры. Ну какой чистый CSS в преддверии 2020 года!?" Что же делать?

Во-первых, разработчики никогда не перестанут придумывать новые технологии. А профессиональные верстальщики – премного им за это благодарны. Язык таблиц стилей CSS, придумали в то время, когда сайты были примитивными. Но шли годы, сайты становились сложнее и массивнее, но способы верстки оставались прежними. Верстальщики запарились писать похожие участки кода. Невозможно было быстро поменять цвет на сайте. Назрела необходимость в большей автоматизации верстки, так и появились препроцессоры CSS кода. И сегодня мы поговорим об одном из них, препроцессоре LESS.


Компиляция LESS и VS Code

Все что потребуется для компиляции LESS кода – это редактор кода VS Code и расширение Easy Less. Как это работает?

  1. Создаем файл стилей c расширением .less
  2. После сохранения, автоматически сгенерируется .css файл в ту же папку.

Каждый раз при сохранении изменений, LESS файлы компилируются в CSS файлы. Браузеры ещё не научились понимать LESS, им нужен CSS код.


Переменные LESS

Наиболее часто используемые свойства выносим в переменные. На сайте обычно используются повторяющиеся цвета и семейства шрифтов. Заносим все цвета в переменные и затем подставляем в правило не код цвета, а переменную. Вы спросите: "В чем прикол? Все равно мне нужно что-то прописывать, какая разница?"

Главная фишка - это быстрая замена цвета. Цвет меняется только один раз, в переменной. Замена цвета в одной переменной, заменит цвет на всех страницах сайта. Только одной этой фишки уже достаточно, чтобы начать использовать LESS. Объявляем переменные в LESS и сохраняем в них нужные нам значения, названия переменных даем осмысленные.

@primary: #194eb4;
@secondary: #f2b834;
@success: #4cb514;
@black: #000;
@white: #fff;

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

LESS

div {
    padding: 0;
    font-family: Roboto, sans-serif;
    color: @black;
}

После сохранения, компилируется CSS код. Мы не трогаем вообще CSS файл, вся работа ведется в LESS файле. Вы можете заносить любые часто повторяющиеся свойства в переменные.

CSS

div {
    padding: 0;
    font-family: Roboto, sans-serif;
    color: #000;
}

Миксины (mixin) в LESS

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

На сайте несколько однотипных кнопок разного цвета, но с одинаковыми шрифтовыми свойствами. Создаем миксин, который помогает автоматизировать процесс создания кнопок.

.button_font {
    font-family: "DIN Pro Bold";
    text-transform: uppercase;
    font-size: 18px;
}

Примешиваем миксин в свойства селектора кнопки.

.portfolio__button {
    padding: 15px 80px;
    color: #344258;
    .button_font;
}

На выходе получаем:

.portfolio__button {
    padding: 15px 80px;
    color: #344258;
    font-family: "DIN Pro Bold";
    text-transform: uppercase;
    font-size: 18px;
}

Символ амперсанд

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

.portfolio__item {
    position: relative;
    background-color: #3c3c3c;
}
    &:hover {
        background-color: #ccc;
    }
}

CSS

.portfolio__item {
    position: relative;
    background-color: #3c3c3c;
}
.portfolio__item:hover {
    background-color: #ccc;
}

Медиа-запросы в LESS

Можно записывать медиа-запросы прямо внутри селектора.

LESS

.header__title {
    color: #344258;
    font-size: 40px;
    font-family: "DIN Pro", sans-serif;
    padding: 0 20px;
    @media only screen and (max-width : 320px){
    font-size: 22px;
    }
}

CSS

.header__title {
    color: #344258;
    font-size: 40px;
    font-family: "DIN Pro", sans-serif;
    padding: 0 20px;
}
@media only screen and (max-width : 320px) {
    .header__title {
        font-size: 22px;
    }
}

Заключение

Эта статья не раскрывает и 25% всех возможностей, что предлагает LESS. Да это и не нужно, цель статьи – мотивация новичков начать использовать препроцессоры. Начиная с самого простого, постепенно двигаясь к более сложному.

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

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