- index.html
- style.lessstyle.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Математические операции, шаг 3</title>
<meta charset="utf-8">
<link href="course.css" rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
<article class="palette">
<h1>Базовые цвета</h1>
<figure class="palette-item">
<figcaption>Основной</figcaption>
<span class="color color-primary">primary</span>
</figure>
<figure class="palette-item">
<figcaption>Ошибка</figcaption>
<span class="color color-error">error</span>
</figure>
<figure class="palette-item">
<figcaption>Инфо</figcaption>
<span class="color color-info">info</span>
</figure>
<figure class="palette-item">
<figcaption>Сигнал</figcaption>
<span class="color color-warning">warning</span>
</figure>
<figure class="palette-item">
<figcaption>Успех</figcaption>
<span class="color color-success">success</span>
</figure>
</article>
</body>
</html>
LESSCSS
@base-color: rgb(110, 27, 255);
@distance: 60;
@error-color: spin(@base-color, @distance);
@info-color: spin(@base-color, @distance * -1);
@warn-color: spin(@base-color, @distance * 2);
@success-color: spin(@base-color, @distance * -2);
.color {
&-primary {
background-color: @base-color;
}
&-error {
background-color: @error-color;
}
&-info {
background-color: @info-color;
}
&-warning {
background-color: @warn-color;
}
&-success {
background-color: @success-color;
}
}
.palette-item {
display: inline-block;
.color {
margin: 0.5em;
}
}
ЗадачиВыполнено
- Первый RGB-параметр
110базового цвета@base-colorзамените на110 + 50, - второй RGB-параметр умножьте на
2, - от третьего RGB-параметра отнимите
30, - а затем прибавьте
20к RGB-записи цвета, чтобы получилосьrgb(…) + 20.