Препроцессор LESS. Как установить и использовать
14 февраля 2020 CSS
LESS — это расширение стандартного функционала CSS благодаря которому появилась возможность программировать обычные стили CSS. То есть использовать переменные, функции, условные операторы и многое другое.
Начало работы
Для того, чтобы ваш проект стал поддерживать LESS, необходимо скачать сам препроцессор, например отсюда. И подключить ваш файл со стилями, как обычный CSS, но только указав rel="stylesheet/less":
<link href="styless.less" rel="stylesheet/less" type="text/css" /> <script type="text/javascript" src="less.js"></script>
Переменные
В LESS вы можете создавать переменные и давать им значения, например цвета, шрифты, изображения. А затем использовать их во всем файле стилей. Это очень удобно, так как один и тот же цвет может использоваться множество раз и теперь чтобы поменять его везде, вам достаточно будет изменить всего лишь одну переменную.
Сервис автоматического обзвона перейти
Зададим переменную color со значением цвета, и применим её к ссылкам и кнопкам:
@color: #da4453;
a {
color:@color;
}
button {
background: @color;
}Встроенные функции
В LESS встроены функции для работы с цветом, можно выполнять математические операции и многое другое.
Прибавим к margin 5px:
@margin: 10px;
h1 {
margin: @margin;
}
h2 {
margin: (@margin + 5);
}@color: #da4453; @color2: #fff; lighten(@color, 10%); // цвет на 10% светлее darken(@color, 10%); // цвет на 10% темнее saturate(@color, 10%); // цвет на 10% насыщенный desaturate(@color, 10%); // цвет на -10% насыщенный fadein(@color, 10%); // цвет на 10% прозрачный fadeout(@color, 10%); // цвет на -10% прозрачный fade(@color, 50%); // цвет с прозрачностью 50% spin(@color, 10); // оттенок цвета на +10 spin(@color, -10); // оттенок цвета на -10 mix(@color, @color2); // смешение цветов @color1 и @color2
Условные операторы
В LESS они называются примеси.
.mixin(@value) when (@value > 0), (@value =< 100) {
color: #da4453;
}
Посмотрим правде в глаза, новые функции CSS3, которые впервые привлекли наше внимание, были анимации и переходы. Это то, чего у нас никогда не было раньше без включения JavaScript. И только то, что это CSS, не означает, что нет библиотек, которые Читать далее
Фильтры CSS - это мощный инструмент, который позволяет нам создавать удивительные визуальные эффекты с нашими элементами. Особенно они хороши для hover эффектов. Фильтры предоставляют нам методы для изменения рендеринга базового элемента DOM. Они позволяют сделать такие эффекты, как например, размытие, Читать далее
Прогресс бар начал использоваться в интернете с тех пор, как мы поняли, что не все будет загружаться мгновенно. Он служит для уведомления пользователя о ходе выполнения конкретной задачи на вашем веб-сайте, такой как загрузка, выгрузка, загрузка приложения и т.д. Раньше Читать далее
Создание прилипающего футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью Flexbox. Без прилипающего футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. Читать далее
Свойство animation в CSS можно использовать для анимации многих других свойств CSS, таких как цвет, цвет фона, высота или ширина. В этой статье рассмотрим на примерах, как использовать анимацию на чистом CSS с помощью этого свойства. Каждую анимацию необходимо определить Читать далее
CSS transition - это свойство, с помощью которого можно сделать плавные эффекты перехода элемента из одного состояния в другое. Ну например плавное изменение цвета блока при наведении. Выглядит это современно, а применяется очень просто и не надо использовать JavaScript. В Читать далее
С появлением функции calc() стало возможным делать математические расчёты, такие как сложение, вычитание, умножение, деление прямо в CSS. Рассмотрим некоторые примеры её использования, которые могут пригодиться. Выравнивание по центру Наверное самый распространённый случай использования. Чтобы отцентрировать элемент, необходимо отступить 50% Читать далее
Вроде все понятно 🙂