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 sin() function is a math function provided by Less.js which is used to find out the sine value of the argument provided and returns the output.
In this article, we are going to take a look at the sin() 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:
sin(number)
Example 1: In this example, we have set the border width and border radius of the p tag using the sin() 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>Less.js Math sin() Function</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body style="font-family: sans-serif;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Less.js Math sin() Function</h3>
<p>I am p tag</p>
</body>
</html>
|
styles.less: The LESS code is as follows.
@width: 5px * sin(60deg);
@radius: 5px * sin(30deg);
p { width: 100px;
border: @width solid green;
border-radius: @radius;
} |
Syntax: To compile the above LESS code into normal CSS, run the following command:
lessc styles.less styles.css
styles.css: The output CSS file looks like the following.
p { width: 100px;
border: 4.33012702px solid green;
border-radius: 2.5px;
} |
Output:
Example 2: In this example, we have created a base value for font size that is @base using the sin() function. We created three font sizes that are multiples of the base value and applied them to the 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>Less.js Math sin() Function</title>
<link rel="stylesheet" href="styles.css">
</head>
<body style="font-family: sans-serif;">
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Less.js Math sin() Function</h3>
<p class="font1">Font 1</p>
<p class="font2">Font 2</p>
<p class="font3">Font 3</p>
</body>
</html>
|
styles.less: The LESS code looks like the following.
@base: 2px * sin(80deg);
@font1: 11px * @base;
@font2: 15px * @base;
@font3: 18px * @base;
.font1 {
font-size: @font1;
} .font2 {
font-size: @font2;
} .font3 {
font-size: @font3;
} |
Syntax: To compile the above LESS code into normal CSS, run the following command.
lessc styles.less styles.css
styles.css: The output CSS file looks like the following.
.font1 {
font-size: 21.66577057px;
} .font2 {
font-size: 29.54423259px;
} .font3 {
font-size: 35.45307911px;
} |
Output:
Reference: https://lesscss.org/functions/#math-functions-sin