Less.js Math acos() Function
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%); } |
Output:
Reference: https://lesscss.org/functions/#math-functions-acos
Please Login to comment...