[CSS] Урок 5: Упрощенная система создания баннеров.

[Николай Винсент]

Как сделать баннеры, но упрощенно (что бы каждый раз не писать новый код)
Цели урока:

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

Итак, начнем!
Что бы сделать баннеры для одной цели, используя CSS, но не прописывая один и тот же код много раз, например сделать префиксы, нужно прописать специальный код, в такой конструкции

.comanda(@name, @znach2 i td) {
    .cssname {
        codik;
        &.@{name} {
            codik: @znach2
            i td;
        }
    }
}

Как то так я описываю эту конструкцию :)
Перейдем к коду!
Итак в 1 строке (comanda) вместо самого текста, указанного чуть ранее в скобках, свою команду, для добавления своего баннера.
Вместо znach2 и также создаем свои переменные, значения которым будут даваться значения при вводе команды.
пример, создадим баннеры, как на аризоне РП.

.addBanner(@name, @bg) when(iscolor(@bg)) {
    .userBanner {
    background-image: linear-gradient(to right, rgba(0,0,0,.5) 0%, transparent 50%, rgba(0,0,0,.5) 100%);
    border: none;
    text-transform: uppercase;
    font-size-adjust: .43;
    font-weight: 600;
    color: #fff;
    padding: 8px 10px;
    border-radius: 20px 5px 20px 5px;
        &.@{name} {
            background-color: @bg;
        }
    }
}

Сейчас разберем::
1 строка: .addBanner(@name, @bg) when(iscolor(@bg)) {
.addBanner задает саму команду, которая создает баннеры
(@name создает переменную, которая будет задавать имя CSS-класса для баннера.
@bg создает переменную, которая будет задавать цвет для фона баннера.
when(iscolor(@bg)) проверяет, указан ли в переменной @bg цвет.
{ открывает кодовую строку.
2 строка: .userBanner {
Полностью не интересна, лишь открывает код.
11 строка: &.@{name} {
& амперсанд, он находится внутри другого селектора и создает в этом же селекторе новый селектор, а точнее, элемент с CSS-классом.
.@{name} использует переменную @name. Очень важная часть. Текстовые переменные после знака собачки (@) название переменной заключается в фигурные скобочки ({}), а числовые не заключаются.
ну, и { открывает новый код
12 строка: background-color: @bg;
background-color задает цвет фона.
@bg применяет переменную.
13,14 и 15 строки закрывают ВСЕ коды
Также, не забываем вводить заданную нами команду после кода, указав значения переменным в скобках в том порядке, в котором они указаны. Кстати, проверять в первой строчке указание в переменной цвета не обязательно.
Код мы построчно перебрали, теперь.
Добавим немного практики!
Попробуй написать код баннера с цветом текста #00009c и цветом фона #c90000, используя конструкцию из этого урока. Также используйте три переменные: @name, @color и @bg . Также внешний отступ должен быть равен 5 пикселям, а внутренний - 10 по бокам и пяти сверху.

Автор урока: Николай Винсент