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

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

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

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

Синтаксис:

tan(value)

Параметры:

value: Это единственный обязательный параметр для этой функции. Этот параметр принимает число с плавающей запятой.

Скомпилируйте код LESS в код CSS.

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

HTML

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

стили.лесс:

CSS

@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@val: tan(55deg);
body{
    background-color: @body-bg-color;
}
.c1 {
    width: 300px * @val;
    height: 150px * @val;
    margin: 1rem * @val;
    background-color: @dark;
}
.p1 {
    padding: 80px 0px 0px 120px;
    color: @light;
}

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

lessc style.less style.css

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

стиль.css:

CSS

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

Выход:

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

HTML

<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" type="text/css" 
          href="style.css"/>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>  
    <h3><b>Less.js Math tan() Function</b></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: tan(20rad);
@cond: boolean(isnumber(@val));
body{
    background-color: @body-bg-color;
}
.c1 {
    width: 300px * @val;
    height: 150px * @val;
    margin: 1rem * @val;
    background-color: if(@cond, @light, @dark);
}
.p1{
    padding: 80px 0px 0px 120px;
    color: if(@cond, @dark, @light);
}

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

lessc style.less style.css

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

стиль.css:

CSS

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

Выход:

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

JavaScript Picked

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

HTML

CSS

CSS

HTML

CSS

CSS

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