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

Такие читатели, как вы, помогают поддерживать MUO. Когда вы совершаете покупку по ссылкам на нашем сайте, мы можем получать партнерскую комиссию. Читать далее.

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

МУО видео дня ПРОКРУТИТЕ, ЧТОБЫ ПРОДОЛЖИТЬ СОДЕРЖАНИЕ

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

---

---

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

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

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

не могу найти редактор групповой политики Windows 10

 function checkDiscount(price, threshold){ 
    if (price >= threshold){ 
        let discount = 5/100 * price; 
        return `Your discount is $${discount}`; 
    } else { 
        return `Sorry, this item does not qualify for a discount. ` 
    } 
} 

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

 let price = prompt("Enter the item price: ") 
alert(checkDiscount(price, 500)) 

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

Понимание функций в Less CSS

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

---

---

 p{ 
    background-color: red; 
    width: calc(13px - 4px); 
} 

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

 @width: 10px; 
@height: 20px; 
div{ 
    margin:if((@width > @height), 10px, 20px) 
} 

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

---

---

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

 div { 
    margin: 20px; 
} 

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

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

 @text-color: red; 
@bg-color: boolean(@text-color = red); 

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

 div{ 
    background-color: if(@bg-color,green,yellow); 
} 

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

 div { 
  background-color: green; 
} 

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

Синтаксис для заменять() функция выглядит так:

 replace(string, pattern, replacement, flags) 

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

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

 @string: "Hello"; 
@pattern: "ello"; 
@replacement: "i"; 
 
div::before{ 
    content: replace(@string,@pattern,@replacement) 
} 

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

 div::before { 
  content: "Hi"; 
} 

Список функций в Less CSS

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

 @groceries: "bread", "banana", "potato", "milk"; 

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

 @result: length(@groceries); 

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

 @third-element: extract(@groceries, 3); 

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

Еще одна функция списка, которая может пригодиться при создании веб-сайтов с помощью Less, — это диапазон() функция. Он принимает три параметра. Первый параметр указывает начальную позицию в диапазоне. Второй параметр указывает конечную позицию, а последний параметр указывает значение приращения или уменьшения между каждым элементом в диапазоне. Если не указано, значение по умолчанию равно 1.

 div { 
    margin: range(10px, 40px, 10); 
} 

Блок кода выше должен скомпилироваться до следующего:

 div { 
 margin: 10px 20px 30px 40px; 
}

Как видите, компилятор Less CSS начинает с 10 пикселей, увеличивая предыдущее значение на 10, пока не достигнет конечной позиции (40 пикселей).

Создание простого веб-сайта с меньшим количеством функций CSS

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

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

проверьте, являются ли две строки анаграммами

 <!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet/less" type="text/css" href="style.less" /> 
    <title>Document</title> 
</head> 
<body> 
    <div class="container"> 
        <h1> 
        </h1> 
    </div> 
<script src="https://cdn.jsdelivr.net/npm/less" ></script> 
</body> 
</html> 

В блоке кода выше есть родитель 'контейнер' див с пустым h1 элемент. источник атрибут на сценарий указывает на путь к компилятору Less CSS.

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

 npm install -g less 

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

686C42170FFFCBA5521BE874527CE92F200573C33

в стиль.less файл, создайте две переменные, а именно: ширина контейнера и контейнер-bg-цвет для представления ширины и цвета фона 'контейнер' див соответственно.

 @container-width: 50rem; 
@container-bg-color: yellow; 

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

 @string: "Hello from the children of planet Earth!"; 
@pattern: "children of planet Earth!"; 
@replacement: "inhabitants of Pluto!"; 
 
.container{ 
    width: @container-width; 
    background-color: @container-bg-color; 
    padding: if(@container-width > 30rem, range(20px, 80px, 20),""); 
    border: solid; 
} 
 
h1:first-child::after{ 
    content: replace(@string,@pattern,@replacement); 
} 

В приведенном выше блоке кода диапазон() функция устанавливает набивка собственность на 'контейнер' див . Компилятор Less должен скомпилировать стиль.less файл в следующее:

 .container { 
  width: 50rem; 
  background-color: yellow; 
  padding: 20px 40px 60px 80px; 
  border: solid; 
} 
h1:first-child::after { 
  content: "Hello from the inhabitants of Pluto!"; 
} 

Когда вы открываете index.htm файл в браузере, вот что вы должны увидеть:

Повысьте свою производительность с помощью препроцессоров CSS

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

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