Less.js Math ceil() Function

Last Updated : 11 Oct, 2022

Less.js is a simple CSS pre-processor that facilitates the creation of manageable, customizable, and reusable style sheets for websites. It is an extension to normal CSS which basically enhances the abilities of normal CSS and gives superpowers to it. LESS.js provides the built-in Math function that can be used to customize the CSS properties, which helps to enhance the overall user experience.

In this article, we are going to discuss Less.js Math ceil() Function. This math ceil() function is used to round up the given number to its nearest integer in the Upward direction of rounding i.e towards the greater value.

Syntax:

ceil(number)

Parameter: This function accepts a single parameter:

number: It accepts a floating point number and returns an integer type value.

Return Value: Result after rounding the number passed as parameter to the function.

Examples:

Input : ceil(4.23)

Output : 5

Input : ceil(0.8)

Output : 1

Compile LESS code into CSS code

Below are some examples that illustrate the Less.js Math ceil() Function:

Example 1:

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>GeeksforGeeks - Less.js</title> 
    <link rel="stylesheet" href="gfgstyles.css"> 
</head> 
    
<body>  
    <div>  
        <h1 class="gfg">  
            GeekforGeeks  
        </h1>  
        <h2>  
            Less.js | Math ceil() Function 
        </h2> 
        <p class="font-without-ceil p"> 
            Font Size without ceil function 
        </p> 
        <p class="font-with-ceil p"> 
            Font Size with ceil function 
        </p> 
    </div> 
</body>  
    
</html>

style.less

.font-without-ceil { 
    font-size: 0.7px * 20; 
    color: rgb(251, 71, 4); 
} 
  
.font-with-ceil { 
    font-size: ceil(0.7px) * 20; 
    color: rgb(87, 219, 57); 
} 
  
body { 
    text-align: center; 
} 
p { 
    font-weight: bold; 
} 
  
.gfg { 
    color: darkgreen; 
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc styles.less gfgstyles.css

The compiled CSS file comes to be:

gfgstyles.css

.font-without-ceil { 
    font-size: 14px; 
    color: #fb4704; 
} 
  
.font-with-ceil { 
    font-size: 20px; 
    color: #57db39; 
} 
  
body { 
    text-align: center; 
} 
  
p { 
    font-weight: bold; 
} 
  
.gfg { 
    color: darkgreen; 
}

Output:

Example 2:

HTML

<!DOCTYPE html> 
<html lang="en"> 
    
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title>GeeksforGeeks - Less.js</title> 
    <link rel="stylesheet" href="gfgstyles.css"> 
</head> 
    
<body>  
    <div>  
        <h1 class="gfg">  
            GeekforGeeks  
        </h1>  
        <h2>  
            Less.js | Math ceil() Function 
        </h2> 
        <div> 
            <button class="font-without-ceil p"> 
                Without Ceil 
            </button> 
        </div> 
        <div> 
            <button class="font-with-ceil p"> 
                With Ceil 
            </button> 
        </div> 
    </div> 
</body>  
    
</html>

style.less

.font-without-ceil { 
    border: solid black 0.6px * 3; 
    color: rgb(251, 71, 4); 
} 
  
.font-with-ceil { 
    border: solid black ceil(0.6px) * 3; 
    color: rgb(87, 219, 57); 
} 
  
body { 
    text-align: center; 
} 
  
.p { 
    font-weight: bold; 
    display: center; 
    padding: 5px; 
    margin: 5px; 
    font-size: 20px; 
} 
  
.gfg { 
    color: darkgreen; 
}

Now, to compile the above LESS code to CSS code, run the following command:

lessc styles.less gfgstyles.css

The compiled CSS file comes to be:

gfgstyles.css

.font-without-ceil { 
    border: solid black 1.8px; 
    color: #fb4704; 
} 
  
.font-with-ceil { 
    border: solid black 3px; 
    color: #57db39; 
} 
  
body { 
    text-align: center; 
} 
  
.p { 
    font-weight: bold; 
    display: center; 
    padding: 5px; 
    margin: 5px; 
    font-size: 20px; 
} 
  
.gfg { 
    color: darkgreen; 
}