Функция Less.js Math pi()

Опубликовано: 24 Января, 2023

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

В этой статье мы собираемся обсудить функцию Math pi() , которая используется для генерации значения pi. Эта функция не принимает параметров и возвращает число, т. е. значение числа пи.

Синтаксис:

pi()

Параметры: нет

Пожалуйста, обратитесь к разделу Компиляция кода LESS в код CSS. статью с подробным описанием процедуры установки.

Пример 1: приведенный ниже код демонстрирует использование и реализацию функции Misc pi() .

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
          type="text/css" 
          href="styles.css" />
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Less.js Math pi() Function</h3>
    <div class="c1">
        <p class="p1">
            <strong>
                pi()
                <br> 3.14159265
            </strong>
        </p>
    </div>
</body>
  
</html>

стили.лесс:

CSS

@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@val: pi();
  
body {
    background-color: @body-bg-color;
}
  
.c1 {
    width: 180px * @val;
    height: 100px * @val;
    margin: 1rem * @val;
    background-color: @dark;
}
  
.p1 {
    padding: 100px 0px 0px 180px;
    font-size: 0.5rem * @val;
    color: @light;
}

Теперь, чтобы скомпилировать приведенный выше код LESS в код CSS, выполните следующую команду:

lessc styles.less styles.css

styles.css: скомпилированный файл CSS выглядит следующим образом:

CSS

body {
    background-color: #eeeeee;
}
  
.c1 {
    width: 565.48667765px;
    height: 314.15926536px;
    margin: 3.14159265rem;
    background-color: hsl(25, 71%, 8%);
}
  
.p1 {
    padding: 100px 0px 0px 180px;
    font-size: 1.57079633rem;
    color: #fdff92;
}

Выход:

Пример 2: приведенный ниже код демонстрирует использование и реализацию функции Misc pi() вместе с функцией типа isnumber if() и булевыми логическими функциями.

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" 
          type="text/css" 
          href="styles.css" />
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Less.js Math pi() Function</h3>
    <div class="c1">
        <p class="p1">
            <strong>
                boolean(isnumber(@val))
                <br> TRUE
            </strong>
        </p>
    </div>
</body>
  
</html>

стили.лесс:

CSS

@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@val: pi();
@cond: boolean(isnumber(@val));
  
body {
    background-color: @body-bg-color;
}
  
.c1 {
    width: 150px * @val;
    height: 75px * @val;
    margin: 0.5rem * @val;
    background-color: if(@cond, @light, @dark);
}
  
.p1 {
    padding: 80px 0px 0px 120px;
    color: if(@cond, @dark, @light);
}

Теперь, чтобы скомпилировать приведенный выше код LESS в код CSS, выполните следующую команду:

lessc styles.less styles.css

styles.css: скомпилированный файл CSS выглядит следующим образом:

CSS

body {
    background-color: #eeeeee;
}
  
.c1 {
    width: 471.23889804px;
    height: 235.61944902px;
    margin: 1.57079633rem;
    background-color: #fdff92;
}
  
.p1 {
    padding: 80px 0px 0px 120px;
    color: hsl(25, 71%, 8%);
}

Выход:

Ссылка: https://lesscss.org/functions/#math-functions-pi

JavaScript Picked

Функция Less.js Math pi()

HTML

CSS

CSS

HTML

CSS

CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ