Less CSS - SPLessons
boy2 Chapter 5

Less Nesting

Less CSS - SPLessons

Less Nesting

shape Introduction

This chapter explains about Less Nesting, its syntax and gives an idea about simple and complex Nesting rules.

shape Description

Nesting has become very important as such not even a single design can be converted to HTML without it. So, nesting is the important factor of HTML page. Below is a detailed explanation of the Less CSS Nesting rules.

Simple Nesting rules

shape Step 1

Below is the middle portion of a sample HTML code.

<div class="middle">
<p>Sample code demonstrating the nesting rules.<span>This is SPAN inside P.</span></p>
</div>

shape Step 2

Now, create some CSS classes for the above HTML code.

#middle
{
width:600px; background-color:#2E9AFE;
font-family:arial;
}
#middle p
{
font-size:15px; color:#3B0B0B;
font-weight:normal;
}
#middle p span
{
color:#DA81F5; font-weight:bold;
}

shape Step 3

Now, create some rules for the above CSS code.

#middle
{
width:600px; background-color:#2E9AFE;
font-family:arial;

p
{
font-size:15px; color:#3B0B0B;
font-weight:normal;
span
{
color:#DA81F5; font-weight:bold;
}
}
}

These are the simple Nesting rules of HTML elements and now let’s look into complex Nesting rules.

Complex Nesting rules

shape Step 1

Let’s consider the same HTML middle portion with some changes as shown below.

<div class="middle">
<p>Sample code demonstrating the nesting rules.</p>
<p class="diff_p">Sample complex nesting rules.</p>
<a href="#">This is the link.</a>
</div>

shape Step 2

 Create some CSS classes for the above HTML code as shown below.

#middle

{
width: 600px; background-color: #2E9AFE;
font-family:arial;
}

#middle p
{
font-size: 15px; color: #3B0B0B;
font-weight:normal;
}

#middle p.diff_p
{
color: #DA81F5; font-weight:bold;
}
#middle a
{
color: #819FF7; text-decoration:underline;
}
#middle a:hover
{
text-decoration:none;
}

shape Step 3

Compile the code to achieve the Less CSS file.

#middle

{
width: 600px; background-color: #2E9AFE;
font-family:arial;
p
{
font-size: 15px; color: #3B0B0B;
font-weight:normal;
&.diff_p
{
color: #DA81F5; font-weight:bold;
}
}
a
{
color: #819FF7; text-decoration:underline;
&:hover{
text-decoration:none;
}
}
}

shape Example

Below example explains the use of Nested rules in LESS CSS.

shape Conceptual
figure

The below conceptual diagram represents the overall view like creating .html and .less files in node js folder and compile .less to .css

shape Step 1

Create a HTML file and LESS file as shown below. Make sure that both the files are created in the Nodejs folder.

nested_rules.html

<html>
<head>
<title>Nested Rules</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
<h1>SPLessons</h1>
<p>The best tutorial website.</p>
<div class="myclass">
<h1>LESS CSS Nested rules</h1>
<p>Simple example on Less css nested rules.</p>
</div>
</div>
</body>
</html>

style.less

.container{
h1{
font-size: 30px;
color:#5858FA;
}
p{
font-size: 20px;
color:#6E6E6E;
}

.myclass{
h1{
font-size: 30px;
color:#5858FA;
}
p{
font-size: 20px;
color:#6E6E6E;
}
}
}

shape Step 2

Compile the above .less in command prompt using the following command.

lessc style.less style.css

shape Step 3

By compiling the above .less file, it automatically generates .css file as shown below.

styel.css

.container h1 {
font-size: 30px;
color: #5858FA;

}
.container p {
font-size: 20px;
color: #6E6E6E;

}
.container .myclass h1 {
font-size: 30px;
color: #5858FA;
}
.container .myclass p {
font-size: 20px;
color: #6E6E6E;
}

shape Result

After making all the required changes, you need to run the html file in a browser to get the following output.

Summary

shape Key Points

  • The simple and complex nesting rules are the major factors of an HTML page.
  • By providing some rules and classes to the HTML code, the output generated looks simple.

shape Programming
Tips

  • Create both the HTML and Less files in Node js folder.
  • Compile less to css before running the application.
  • Make the required changes in the file like font size, color and more before running the application.