Less.js Разное Функция get-unit()
Less.js — это простой препроцессор CSS, облегчающий создание управляемых, настраиваемых и многократно используемых таблиц стилей для веб-сайтов. Поскольку CSS является динамическим языком таблиц стилей, он предпочтительнее. LESS адаптируется, поэтому он работает с широким спектром браузеров. Веб-браузеры могут использовать только CSS, которые были созданы и обработаны с помощью препроцессора CSS, языка программирования. В дополнение к таким возможностям, как переменные, функции, примеси и операции, которые помогают создавать динамический CSS при сохранении обратной совместимости, это расширение языка CSS.
В этой статье мы собираемся обсудить функцию Misc get-unit() , ее полезность заключается в том, чтобы найти единицу измерения числа, которое передается в функцию. Эта функция возвращает единицу измерения, если число содержит единицу измерения, и ничего, если число не содержит единицы измерения.
Синтаксис:
get-unit(number)
Параметры:
- номер: единственный обязательный параметр для этой функции, который должен быть числом с единицей измерения или без нее.
Пожалуйста, обратитесь к разделу Компиляция кода LESS в код CSS. статью с подробным описанием процедуры установки.
Пример 1: Приведенный ниже код демонстрирует использование и реализацию функции Misc get-unit() и использует ее с функцией ispixel() с логическими функциями if() и boolean .
HTML
<!DOCTYPE html><html> <head> <link rel="stylesheet" type="text/css" href="style.css" /></head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Less.js Misc get-unit() Function</h3> <div class="c1"> <p>@uni: get-unit(@no) <br>boolean(ispixel(@uni)) <br>TRUE </p> </div></body> </html> |
стили.лесс:
CSS
@body-bg-color: #eeeeee;@no: 250px;@uni: get-unit(@no);@color1: #95f3e7;@color2: #4b1905;@cond: boolean(ispixel(@uni)); body { background-color: @body-bg-color;} .c1 { width: 500px; height: @no; background-color: if(@cond, @color1, @color2); margin: 1rem;} p { color: if(@cond, @color2, @color1); font-size: 1.5rem; padding: 5rem 0 0 4.5rem;} |
Теперь, чтобы скомпилировать приведенный выше код LESS в код CSS, выполните следующую команду:
lessc styles.less styles.css
styles.css: скомпилированный файл CSS выглядит следующим образом:
CSS
body { background-color: #eeeeee;} .c1 { width: 500px; height: 250px; background-color: #4b1905; margin: 1rem;} p { color: #95f3e7; font-size: 1.5rem; padding: 5rem 0 0 4.5rem;} |
Выход:
Пример 2: приведенный ниже код демонстрирует использование и реализацию функции Misc get-unit() и использует ее с функцией isstring(). и строковая функция % format() .
HTML
<!DOCTYPE html><html> <head> <link rel="stylesheet" type="text/css" href="style.css"/></head> <body> <h1 style="color:green">GeeksforGeeks</h1> <h3>Less.js Misc get-unit() Function</h3> <div class="c1"> <p> @uni: get-unit(@no) <br>@estr: e(%("%a%d", 250, @uni)); <br>height: 250px </p> </div></body> </html> |
стили.лесс:
CSS
@body-bg-color: #eeeeee;@no: 250px;@uni: get-unit(@no);@str: %("%a%d", 250, @uni);@estr: e(@str);@color1: #95f3e7;@color2: #4b1905;@cond: boolean(isstring(@uni)); body { background-color: @body-bg-color;} .c1 { width: 500px; height: @estr; background-color: if(@cond, @color2, @color1); margin: 1rem;} p { color: if(@cond, @color1, @color2); font-size: 1.5rem; padding: 5rem 0 0 4.5rem;} |
Теперь, чтобы скомпилировать приведенный выше код LESS в код CSS, выполните следующую команду:
lessc styles.less styles.css
styles.css: скомпилированный файл CSS выглядит следующим образом:
CSS
body { background-color: #eeeeee;} .c1 { width: 500px; height: 250px; background-color: #95f3e7; margin: 1rem;} p { color: #4b1905; font-size: 1.5rem; padding: 5rem 0 0 4.5rem;} |
Выход:
Ссылка: https://lesscss.org/functions/#misc-functions-get-unit