Open In App

Less.js Math atan() Function

Improve
Improve
Like Article
Like
Save
Share
Report

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is chosen because CSS is a dynamic style sheet language. LESS is flexible, thus it functions with a variety of browsers. Web browsers can only use CSS that has been written in and processed using the CSS pre-processor, a programming language. It is a CSS language extension that also offers features like variables, functions, mixins, and operations to aid in the creation of dynamic CSS while keeping backward compatibility.

In this article, we are going to discuss the Math atan() function, which is used to do the arctangent function on a given value. Basically, it is used to find the inverse tangent value of a value. This function takes a floating number or deg value or rad value as a parameter and performs tan operation on that value and returns a number

Syntax:

atan(value)

 

Parameters:

  • value: This is the only compulsory parameter for this function. This parameter takes a floating number.

Return type: This method returns a floating number.

Example 1: The code below demonstrates the usage and implementation of the Misc atan() function.

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 atan() Function</b></h3>
    <div class="c1">  
        <p class="p1">
            <strong>
                atan(15.695)
                <br> 1.50716778rad
            </strong>
        </p>
    </div>
</body>
  
</html>


styles.less

CSS




@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@val: atan(15.695);
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;
}


Now, to compile the above LESS code to CSS code, run the following command:

lessc style.less style.css

style.css: The CSS output of the above Less file was compiled.

CSS




body {
    background-color: #eeeeee;
}
.c1 {
    width: 452.1503328px;
    height: 226.0751664px;
    margin: 1.50716778rem;
    border: 1.50716778rad;
    background-color: hsl(25, 71%, 8%);
}
.p1 {
    padding: 80px 0px 0px 120px;
    color: #fdff92;
}


Output:

 

Example 2: The code below demonstrates the usage and implementation of the Misc atan() function along with isnumber type function if and boolean logical functions.

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 atan() Function</b></h3>
    <div class="c1">  
        <p class="p1">
            <strong>
                boolean(isnumber(atan(2)))
                <br> TRUE
            </strong>
        </p>
    </div>
</body>
  
</html>


styles.less

CSS




@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@val: atan(2);
@cond: boolean(isnumber(@val));
body {
    background-color: @body-bg-color;
}
.c1 {
    width: 400px * @val;
    height: 200px * @val;
    margin: 1rem * @val;
    background-color: if(@cond, @light, @dark);
}
.p1 {
    padding: 80px 0px 0px 100px;
    color: if(@cond, @dark, @light);
}


Now, to compile the above LESS code to CSS code, run the following command:

lessc style.less style.css

style.css:  The CSS output of the above Less file was compiled.

CSS




body {
    background-color: #eeeeee;
}
.c1 {
    width: 442.85948712px;
    height: 221.42974356px;
    margin: 1.10714872rem;
    background-color: #fdff92;
}
.p1 {
    padding: 80px 0px 0px 100px;
    color: hsl(25, 71%, 8%);
}


Output:

 

Reference: https://lesscss.org/functions/#math-functions-atan 



Last Updated : 14 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads