Open In App

Less.js Math sqrt() Function

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is more advantageous because CSS employs a dynamic style sheet language. Several different browsers can use LESS because of its flexibility. In order for web browsers to use CSS, it must be built and enhanced using a computer language known as the CSS pre-processor. It is also a CSS language extension that provides tools like variables, functions, mixins, and operations to help create dynamic CSS while keeping backward compatibility.

In this article, we will discuss In this article, Math sqrt() function. The sqrt() function is used to find the square root of the passed number as a parameter.

Syntax:

sqrt(number)

 

Parameters:

Return type: The sqrt() functions returns a number.

Example 1: In this example, we have set the font size of the p tag using the sqrt() function.

The HTML code is as follows: (index.html)




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href="/styles.css">
</head>
  
  <body>
  
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>Less.js Math sqrt() Function</h3>
  
    <p>My font size is: square root of 100px</p>
</body>
  
</html>

Style.less




p {
      font-size: sqrt(100px);
}

To compile the above LESS code into normal CSS, run the following command:

lessc styles.less styles.css

The compiled output CSS file looks like this: 

styles.css




p {
      font-size: 10px;
}

Output:

Output of Less.js Math sqrt() Function example 1

Example 2: In this example, we have defined a variable @myvar, which stores the value of 25px. Now using the sqrt() method we have calculated the padding of the p tag by providing @myvar to it as an argument. Also, we have found out the width and border width of the p tag using the sqrt() function.

index.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 sqrt() Function
    </title>
    <link rel="stylesheet" href="/styles.css">
</head>
  
<body>
  
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>Less.js Math sqrt() Function</h3>
  
    <p>I am p tag</p>
</body>
  
</html>

styles.less




@myvar: 25px;
p {
    width: sqrt(10000px);
    border: sqrt(0.4rem) solid black;
    padding: sqrt(@myvar);
}

To compile the above LESS code into normal CSS, run the following command:

lessc styles.less styles.css

The compiled output CSS file looks like this: 

styles.css




p {
    width: 100px;
    border: 0.63245553rem solid black;
    padding: 5px;
}

Output:

Output of Less.js Math sqrt() Function 

Reference: https://lesscss.org/functions/#math-functions-sqrt


Article Tags :