Как использовать функции в Less CSS

Less CSS — это динамичный и мощный препроцессор CSS, популярный в последние годы. В качестве препроцессора он действует как расширение «ванильного CSS», предоставляя множество дополнительных возможностей и функций, улучшающих общий стиль оформления.

Если вы освоили написание стандартного CSS, вы можете легко перейти к использованию Less CSS без особого обучения. Это позволяет легко поддерживать имеющиеся у вас знания CSS, используя расширенные функции Less.

Что такое функции и почему они важны?

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

Они позволяют легко уменьшить дублирование кода в программе. Предположим, у вас есть программа, которая вычисляет скидку на основе цены, введенной пользователем. На таком языке, как JavaScript, вы можете реализовать это следующим образом:

функция checkDiscount(цена, порог){ если (цена >= порог){ пусть скидка = 5/100 * цена; return `Ваша скидка $${discount}`; } else { return `Извините, на этот товар скидка не распространяется. ` } }

Затем вы можете вызвать эту функцию и передать ее цене и порогу.

let price = prompt(“Введите цену товара: “) alert(checkDiscount(price, 500))

Удалив логику проверки скидки, программа не только стала читабельной, но теперь у вас есть повторно используемый блок кода для обработки скидки и возврата результата. Функции могут делать гораздо больше вещей, это только основы.

Что такое функция в Less CSS?

Традиционный CSS имеет очень ограниченное количество функций для программиста. Одной из самых популярных функций CSS является математическая функция calc(), которая делает именно то, что и делает — выполняет вычисления и использует результаты в качестве значений свойств в CSS.

р {цвет фона: красный; ширина: расчет (13px – 4px); }

В Less CSS есть несколько функций, которые делают больше, чем просто арифметику. Одна функция, с которой вы можете столкнуться в Less, — это функция if. Функция if принимает три параметра: условие и два значения. Блок кода ниже показывает, как вы можете использовать эту функцию:

@ширина: 10 пикселей; @высота: 20 пикселей; div{поле:if((@width > @height), 10px, 20px) }

В приведенном выше блоке кода компилятор Less проверяет, превышает ли ширина переменной (определяемая символом @) ее высоту. Если условие истинно, функция возвращает первое значение после условия (10px). В противном случае функция возвращает второе значение (20 пикселей).

После компиляции вывод CSS должен выглядеть так:

div {поле: 20px; }

Как использовать логическое значение в CSS

Логическое значение — это переменная, которая может принимать два значения: true или false. С помощью функции boolean() в Less вы можете сохранить истинное или ложное значение выражения в переменной для последующего использования. Вот как это работает.

@text-color: красный;

В приведенном выше блоке кода компилятор Less проверяет, является ли цвет текста красным. Затем переменная bg-color содержит это значение.

div{цвет фона: if(@bg-color,green,yellow); }

Приведенный выше блок кода компилируется в следующий вывод:

div { цвет фона: зеленый; }

Заменить текст в строке с помощью функции replace()

Синтаксис функции replace() выглядит следующим образом:

заменить(строка, шаблон, замена, флаги)

string представляет собой строку, которую вы хотите найти и заменить. шаблон — это строка для поиска. pattern также может быть регулярным выражением, но обычно это строка. После успешного совпадения компилятор Les CSS заменит шаблон заменой.

Дополнительно функция replacemen() может также содержать параметр flags для флага регулярного выражения.

@строка: “Привет”; @pattern: “привет”; @замена: “я”; div::before{ содержимое: заменить(@string,@pattern,@replacement) }

Результат:

div::before { content: “Привет”; }

Функция списка в Less CSS

В Less CSS вы используете запятые или пробелы для определения списка значений. Например:

@продукты: “хлеб”, “банан”, “картошка”, “молоко”;

Вы можете использовать функцию length() для оценки количества элементов в списке.

@результат: длина(@продукты);

Вы также можете использовать функцию extract() для извлечения значения в определенном месте. Например, если вы хотите получить 3-й элемент в списке продуктов, сделайте следующее:

@третий элемент: экстракт(@продукты, 3);

В отличие от обычных языков программирования, где индексы списка начинаются с 0, начальный индекс списка в Less CSS всегда равен 1.

Создавайте простые веб-сайты с помощью функций Less CSS

Теперь пришло время объединить все, что вы узнали, и создать простой проект с помощью Less CSS. Создайте каталог и добавьте файлы index.htm и style.less.

Откройте файл index.htm и добавьте следующий код HTML:

Документ

Вышеупомянутый блок кода имеет родительский «контейнер» div с пустым элементом h1. Атрибут src в теге script указывает путь к компилятору Less CSS.

Без этого тега script браузер не сможет понять ваш код. Кроме того, вы можете установить Less CSS на свой компьютер через Node Package Manager (NPM), выполнив следующую команду в терминале:

npm установить -g меньше

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

меньше стиля.меньше стиля.css

В файле style.less создайте две переменные: container-width и container-bg-color для представления ширины и цвета фона элемента div «контейнер» соответственно.

@container-width: 50rem; @container-bg-цвет: желтый;

Затем создайте три переменные, а именно: строку, шаблон и замену. . Затем добавьте стили для div-контейнера и элемента h1.

@string: “Привет от детей планеты Земля!”; @pattern: “дети планеты Земля!”; @replacement: “жители Плутона!”; .container{ ширина: @container-width; цвет фона: @container-bg-color; отступы: if(@container-width > 30rem, range(20px, 80px, 20),””); граница: сплошная; } h1:first-child::after{ content: replace(@string,@pattern,@replacement); }

В приведенном выше блоке кода функция range() устанавливает свойство заполнения для элемента div «контейнер». Компилятор Less скомпилирует файл style.less следующим образом:

.container { ширина: 50rem; цвет фона: желтый; отступ: 20px 40px 60px 80px; граница: сплошная; } h1:first-child::after { content: “Привет от жителей Плутона!”; }

Когда вы открываете файл index.htm в своем браузере, вывод выглядит следующим образом: