Препроцессор 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;
}
Возникла задача вывести 5 одинаковых адаптивных колонок на сайте с Bootstrap. Помогло это решение. У меня был Bootrstrap 4, но есть аналогичное решение и для 3 версии, там ещё проще. 5 колонок в Bootstrap 4 Добавляем данный код в файл Читать далее
Пример выпадающего многоуровневого меню с эффектом плавного появления. Меню работает как с использованием jQuery, так и на чистом CSS. При использовании меню на сайте все отлично работает даже с 3 уровнями вложенности. Подключаем библиотеку jQuery: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> HTML-код: <ul Читать далее
Flexbox - это новый, более эффективный способ выравнивания блоков в HTML вёрстке. Появление Flexbox, а точнее свойства display: flex; заметно облегчило жизнь многим веб-разработчикам, и сейчас применяется в фреймворке Bootstrap 4. Возможно поначалу кому-то будет сложно отойти от привычного float: Читать далее
Странно, но мало, где пишут об этой полезной библиотеке, поэтому исправляю эту ситуацию. Hover.css - это бесплатная коллекция CSS3-эффектов при наведении, применяемых к ссылкам, кнопкам, логотипам, SVG, изображениям и т. д. Легко применяется к элементам и доступна в CSS, Sass Читать далее
LESS - это расширение стандартного функционала CSS благодаря которому появилась возможность программировать обычные стили CSS. То есть использовать переменные, функции, условные операторы и многое другое. Начало работы Для того, чтобы ваш проект стал поддерживать LESS, необходимо скачать сам препроцессор, например Читать далее
Стоп-форма - это всплывающее окно, призывающее к действию, которое открывается через определенное время нахождения пользователя на странице или когда он пытается покинуть её. Чаще всего стоп-формы используются на Landing page. Стоп-форма по таймеру Рассмотрим пример вплывающего окна с формой на Читать далее
С появлением функции calc() стало возможным делать математические расчёты, такие как сложение, вычитание, умножение, деление прямо в CSS. Рассмотрим некоторые примеры её использования, которые могут пригодиться. Выравнивание по центру Наверное самый распространённый случай использования. Чтобы отцентрировать элемент, необходимо отступить 50% Читать далее
Вроде все понятно 🙂