Less.js Math cos() Function
Last Updated :
25 Oct, 2022
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.
HTML
<!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.
CSS
@ width : 5px * cos( 60 deg);
@radius: 5px * cos( 30 deg);
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.
CSS
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.
HTML
<!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.
CSS
@angle: 45 deg ;
@ 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.
CSS
p {
width : 141.42135624px ;
background-color : lightgreen;
}
|
Output:
Reference: https://lesscss.org/functions/#math-functions-cos
Share your thoughts in the comments
Please Login to comment...