Less.js Math acos() Function

Last Updated : 10 Nov, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Because CSS is a dynamic style sheet language, it was chosen. Because LESS is adaptable, it works with a wide range of browsers. Only CSS that has been written in and processed using the CSS pre-processor, a programming language, can be used by web browsers. In addition to providing capabilities like variables, functions, mixins, and operations to help create dynamic CSS while maintaining backward compatibility, it is a CSS language extension.

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

Syntax:

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

styles.less:

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(253, 255, 146); 
@val: acos(0.695); 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: 500px * @val; 
    height: 250px * @val; 
    margin: 1rem; 
    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: 401.188213px; 
      height: 200.5941065px; 
      margin: 0.80237643rem; 
      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 acos() 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 acos() Function</b></h3> 
    <div class="c1">   
        <p class="p1"> 
            <strong> 
                boolean(isnumber(acos(0.52))) 
                <br> TRUE 
            </strong> 
        </p> 
    </div> 
</body> 
</html>

style.less:

CSS

@body-bg-color: #eeeeee; 
@dark: hsl(25, 71%, 8%); 
@light: rgb(253, 255, 146); 
@val: acos(0.52); 
@cond: boolean(isnumber(@val)); 
body { 
    background-color: @body-bg-color; 
} 
.c1 { 
    width: 500px * @val; 
    height: 250px * @val; 
    margin: 1rem; 
    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: 511.97268805px; 
      height: 255.98634402px; 
      margin: 1rem; 
      background-color: #fdff92; 
} 
.p1 { 
      padding: 80px 0px 0px 100px; 
      color: hsl(25, 71%, 8%); 
}