Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It was chosen because CSS is a dynamic style sheet language. LESS is flexible, so it works with a variety of browsers. Web browsers can only use CSS that has been created 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 asin() function, which is used to do the arcsine function on a given value. Basically, it is used to find the inverse sine value of a value. This function takes a floating number in the [-1, 1] interval as a parameter and performs arcsine operation on that value and returns a number in rad.
Syntax:
acos(value)
Parameters:
- value: This is the only compulsory parameter for this function. This parameter takes a floating number in the [-1, 1] interval.
Return type: This method returns a floating number in rad.
Example 1: The code below demonstrates the usage and implementation of the Misc asin() function.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Less.js Math asin() Function</h3>
<div class="c1">
<p class="p1">
<strong>
asin(-0.295)
<br> -0.29945552rad
</strong>
</p>
</div>
</body>
</html>
|
styles.less:
@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@val: asin(-0.295);
@aval: abs(@val); body { background-color: @body-bg-color;
} .c1 {
width: 1500px * @aval;
height: 750px * @aval;
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.
body { background-color: #eeeeee;
} .c1 {
width: 449.18327801px;
height: 224.591639px;
margin: 1rem;
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 asin() function along with isnumber type function if() and boolean logical functions.
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>Less.js Math asin() Function</h3>
<div class="c1">
<p class="p1">
<strong>
boolean(isnumber(asin(0.9)))
<br> TRUE
</strong>
</p>
</div>
</body>
</html>
|
styles.less:
@body-bg-color: #eeeeee;
@dark: hsl(25, 71%, 8%);
@light: rgb(253, 255, 146);
@val: asin(0.75);
@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.
body { background-color: #eeeeee;
} .c1 {
width: 424.03103949px;
height: 212.01551975px;
margin: 1rem;
background-color: #fdff92;
} .p1 {
padding: 80px 0px 0px 100px;
color: hsl(25, 71%, 8%);
} |
Output:
Reference: https://lesscss.org/functions/#math-functions-asin