Функции значительно упрощают процесс программирования, и это верно и при написании кода CSS.
Less CSS — это надежный и динамичный препроцессор CSS, который в последние годы привлек значительное внимание и популярность. В качестве препроцессора он служит расширением «ванильного CSS», традиционного языка стилей CSS, используемого в веб-дизайне. разработка, предоставляя множество дополнительных функций и функций, которые улучшают общий стиль опыт.
Если вы хорошо разбираетесь в написании стандартного CSS, вы можете легко перейти к использованию Less CSS без долгого обучения. Эта совместимость позволяет легко поддерживать существующие знания CSS, используя при этом расширенные возможности Less.
Что такое функции и почему они важны?
В программировании функция — это блок кода, выполняющий определенную задачу. Вы также можете повторно использовать его в другом месте программы. Функции обычно принимают данные, обрабатывают их и возвращают результаты.
Они упрощают сокращение повторяющегося кода в программе. Например, предположим, что у вас есть программа, которая вычисляет скидку на основе цены, которую вводит пользователь. В
язык как JavaScript, вы можете реализовать это так:функцияпроверитьСкидка(цена, порог){
если (цена >= порог){
позволять скидка = 5/100 * цена;
возвращаться`Ваша скидка $${скидка}`;
} еще {
возвращаться«Извините, на этот товар скидка не распространяется. `
}
}
Затем вы можете вызвать функцию и передать цена и порог.
позволять цена = подскажите("Введите цену товара:")
оповещение (чекСкидка (цена, 500))
Абстрагируя логику проверки скидок, программа не только удобочитаема, но теперь у вас есть повторно используемый блок кода, который обрабатывает скидку и возвращает результат. Функции могут делать намного больше, но это только основы.
Понимание функций в Less CSS
В традиционном CSS имеется очень ограниченный набор функций, доступных вам как разработчику. Одной из самых популярных функций в CSS является calc()математическая функция который делает именно то, что кажется — выполняет вычисления и использует результат как значение свойства в CSS.
п{
фоновый цвет: красный;
ширина: вычислять(13пикс.- 4пикс.);
}
В Less CSS есть несколько функций, которые выполняют не только арифметические операции. Одна функция, с которой вы можете столкнуться в Less, — это если функция. если функция принимает три параметра: условие и два значения. Блок кода ниже показывает, как вы можете использовать эту функцию:
@ширина: 10 пикселей;
@высота: 20 пикселей;
див{
допуск:если((@ширина > @высота), 10 пикселей, 20 пикселей)
}
В приведенном выше блоке кода компилятор Less проверяет, является ли переменная ширина (определяется @ символ) больше, чем переменная высота. Если условие истинно, функция возвращает первое значение после условия (10px). В противном случае функция возвращает второе значение (20 пикселей).
После компиляции вывод CSS должен выглядеть примерно так:
див {
допуск: 20пикс.;
}
Как использовать логическое значение в Less
Логическое значение — это переменная, которая может принимать два возможных значения: истинный или ЛОЖЬ. С логическое() функции в Less, вы можете сохранить истинное или ложное значение выражения в переменной для последующего использования. Вот как это работает.
@цвет текста: красный;
@bg-цвет: логическое значение(@текст-цвет = красный);
В приведенном выше блоке кода компилятор Less проверяет, цвет текста красный. Затем bg-цвет переменная хранит значение.
див{
фоновый цвет: если(@bg-цвет,желто-зеленый);
}
Приведенный выше блок кода компилируется примерно так:
див {
фоновый цвет: зеленый;
}
Замена текста в строке с помощью функции replace()
Синтаксис для заменять() функция выглядит так:
заменять(нить, шаблон, замена, флаги)
нить представляет строку, которую вы хотите найти и заменить. шаблон это строка для поиска. шаблон также может быть регулярным выражением, но обычно это строка. После успешного совпадения компилятор Less CSS заменяет это шаблон с замена.
Опционально, заменять() функция также может содержать флаги параметр для флагов регулярного выражения.
@нить: "Привет";
@шаблон: "привет";
@замена: "я";
див::до{
содержание: заменять(@нить,@шаблон,@замена)
}
Приведенный выше блок кода должен привести к следующему результату после компиляции:
див::до {
содержание: "Привет";
}
Список функций в Less CSS
В Less CSS вы используете запятые или пробелы для определения списка значений. Например:
@продукты: "хлеб", "банан", "картофель", "молоко";
Вы можете использовать длина() Функция для оценки количества элементов в списке.
@результат: длина(@продукты);
Вы также можете использовать извлекать() функция для извлечения значения в определенной позиции. Например, если вы хотите получить третий элемент в продукты список, вы делаете следующее:
@третий элемент: экстракт(@продукты, 3);
В отличие от обычных языков программирования, где индекс списка начинается с 0, начальный индекс списка в Less CSS всегда равен 1.
Еще одна функция списка, которая может пригодиться при создании веб-сайтов с помощью Less, — это диапазон() функция. Он принимает три параметра. Первый параметр указывает начальную позицию в диапазоне. Второй параметр указывает конечную позицию, а последний параметр указывает значение приращения или уменьшения между каждым элементом в диапазоне. Если не указано, значение по умолчанию равно 1.
дел {
поля: диапазон (10px, 40px, 10);
}
Блок кода выше должен скомпилироваться до следующего:
дел {
поля: 10px 20px 30px 40px;
}Как видите, компилятор Less CSS начинает с 10 пикселей, увеличивая предыдущее значение на 10, пока не достигнет конечной позиции (40 пикселей).
Создание простого веб-сайта с меньшим количеством функций CSS
Пришло время объединить все, что вы узнали, и создать простой проект с помощью Less CSS. Создайте папку и добавьте index.htm и стиль.less файлы.
Открой index.htm файл и добавьте следующий код HTML.
HTML>
<HTMLязык="ан">
<голова>
<метакодировка="УТФ-8">
<метаимя="окно просмотра"содержание="ширина = ширина устройства, начальный масштаб = 1,0">
<связьотн.="таблица стилей/меньше"тип="текст/CSS"href="без стиля" />
<заголовок>Документзаголовок>
голова>
<тело>
<дивсорт="контейнер">
<h1>
h1>
див>
<сценарийисточник=" https://cdn.jsdelivr.net/npm/less" >сценарий>
тело>
HTML>
В блоке кода выше есть родитель "контейнер"див с пустым h1 элемент. источник атрибут на сценарий указывает на путь к компилятору Less CSS.
Без этого сценарий тег, браузер не сможет понять ваш код. Кроме того, вы можете установить Less CSS на свой компьютер через Менеджер пакетов узлов (NPM), выполнив в терминале следующую команду:
npm установить -g меньше
Когда вы будете готовы скомпилировать .меньше файл, просто запустите приведенную ниже команду, убедившись, что вы указали файл, в который компилятор должен записать вывод.
меньше стиля.меньше стиля.css
в стиль.less файл, создайте две переменные, а именно: ширина контейнера и контейнер-bg-цвет для представления ширины и цвета фона "контейнер"див соответственно.
@container-ширина: 50 бэр;
@container-bg-цвет: желтый;
Затем создайте три переменные, а именно: нить, шаблон, и замена. Затем добавьте стили для "контейнер"див и h1 элемент.
@нить: "Привет от детей планеты Земля!";
@шаблон: "дети планеты Земля!";
@замена: "жители Плутона!";.контейнер{
ширина: @container-ширина;
фоновый цвет: @container-bg-цвет;
набивка: если(@container-ширина > 30бэр, диапазон(20 пикселей, 80 пикселей, 20),"");
граница: твердый;
}
h1:Первый ребенок::после{
содержание: заменять(@нить,@шаблон,@замена);
}
В приведенном выше блоке кода диапазон() функция устанавливает набивка собственность на "контейнер"див. Компилятор Less должен скомпилировать стиль.less файл в следующее:
.контейнер {
ширина: 50бэр;
фоновый цвет: желтый;
набивка: 20пикс. 40пикс. 60пикс. 80пикс.;
граница: твердый;
}
h1:Первый ребенок::после {
содержание: "ПриветотвжителиизПлутон!";
}
Когда вы открываете index.htm файл в браузере, вот что вы должны увидеть:
Повысьте свою производительность с помощью препроцессоров CSS
В обычных языках программирования функции сокращают объем кода, который необходимо написать, и сводят к минимуму количество ошибок. Препроцессоры CSS, такие как Less, предоставляют несколько функций, упрощающих написание кода CSS.
Препроцессоры CSS пригодятся при работе с большими файлами. Они облегчают устранение неполадок, тем самым повышая производительность труда разработчика.
