Less (Leaner style sheets) is an extension to normal CSS which is basically used to enhance the abilities of normal CSS and give it superpowers. The cos() function is a Math Function in Less.js which is used to find out the cosine value of the argument provided and returns the output.
In this article, we are going to take a look at the cos() function in Less.js.
Parameter:
- number: Any numeric value (with or without a unit). If no unit is provided then the default unit is considered as radians. For example: 1rad, 30deg etc.
Syntax:
cos(number)
Example 1: In this example, we have set the border width and the border radius of the p tag using the cos() function.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeeksforGeeks | Less.js Math cos() Function</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<h3>Less.js Math cos() Function</h3>
<p>I am p tag</p>
</body>
</html>
|
styles.less: The LESS code is as follows.
@width: 5px * cos(60deg);
@radius: 5px * cos(30deg);
p{ border: @width solid green;
border-radius: @radius;
width: 100px;
} |
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
The compiled CSS file comes to be:
styles.css: The output CSS file looks like the following.
p { border: 2.5px solid green;
border-radius: 4.33012702px;
width: 100px;
} |
Output:
Example 2: In this example, we have set the width of the p tag using the cos() function and provided a background color.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeeksforGeeks | Less.js Math cos() Function</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks</h1>
<h3>Less.js Math cos() Function</h3>
<p>I am p tag</p>
</body>
</html>
|
styles.less: The LESS code is as follows.
@angle: 45deg ;
@width: 200px * cos( @angle );
p{ width: @width;
background-color: lightgreen;
} |
Now, to compile the above LESS code to CSS code, run the following command:
lessc styles.less styles.css
The compiled CSS file comes to be:
styles.css: The output CSS file looks like the following.
p { width: 141.42135624px;
background-color: lightgreen;
} |
Output:
Reference: https://lesscss.org/functions/#math-functions-cos