Less.js Math tan() Function
Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. Since CSS is a dynamic style sheet language, it is preferred. LESS is adaptable, so it works with a wide range of browsers. Only CSS that has been created and processed using the CSS pre-processor, a computer 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 tan() function, which is used to do the tangent function on a given value. This function takes a floating number or deg value or rad value as a parameter and performs an tan operation on that value and returns a number.
Syntax:
tan(value)
Parameters:
- value: This is the only compulsory parameter for this function. This parameter takes a floating number.
Compile LESS code into CSS code.
Example 1: The code below demonstrates the usage and implementation of the Misc tan() 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 tan() Function</b></h3> <div class="c1"> <p class="p1"> <strong> tan(55deg) <br> 1.42814801 </strong> </p> </div></body></html> |
styles.less:
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;} |
Now, to compile the above LESS code to CSS code, run the following command:
lessc style.less style.css
The compiled CSS file comes to be:
style.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;} |
Output:
Example 2: The code below demonstrates the usage and implementation of the Misc tan() 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 tan() Function</b></h3> <div class="c1"> <p class="p1"> <strong> boolean(isnumber(@val)) <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: 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);} |
Now, to compile the above LESS code to CSS code, run the following command:
lessc style.less style.css
The compiled CSS file comes to be:
style.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%);} |
Output:
Reference: https://lesscss.org/functions/#math-functions-tan
Please Login to comment...