Simple Introduction to JADE

Posted By Saloni Arora | 25-Sep-2018
An introduction to jade CSS
 
 
Jade is basically meant for Sever side templating in NodeJs. It helps in writing markup language in a very different way and also it has a lot of new features as compared to HTML.
 
Some point of difference in the jade are:
 
1) In normal HTML we used to write like this.
eg:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<div>
<h1> Welcome to our page. </h1>

<p>Now we will see the latest technologies.</p>

<ul>
<li> Html </li>
<li> Html </li>
</ul>
</div>
 
 
In jade we write the same content like this:
eg:

1
2
3
4
5
6
7
8
div
h1 Welcome to our page. 

p Now we will see the latest technologies.

ul
            li  Html 
li      Html 
 
 
The major features of Jade are:
 
a)Simple Tags.
 
b)Adding attributes to the tags.
 
c)Blocks of text.
 
 SIMPLE TAGS:     As we already noticed that there are no closing tags in jade. It simply uses indentation and it observes on the basis of the nested way of the tags. 
 
How the tags are nested is the only way of knowing which tag comes inside which tag.
eg:

1
2
3
4
5
div

h1 Welcome!

h2 To this Blog
 
So the indentation of this above text tells us that the h1 and h2 are inside this div. Jade treats the first word of the line as a tag. While the words written next to it will be treated as the text inside the tag.
 
ATTRIBUTES:
 
Now it is the major concern that how can we add attributes to the tags.
 

1
2
3
4
5
6
7
div(class="background-class", id="welcome 11")
  h1(class="heading") welcome's 11
  img(src="/img/welcomes-11.png", class="img-class")
  ul(class="courses-list")
    li HTML

     li CSS
 
jade also provides the shorthand for classes and ids.
 
div.background-class
 
h1.heading
 
We can easily spot the classes as jade provides to write them in normal CSS selector form.
 
BLOCK OF TEXT :  In Jade, we can write Various blocks. 
 

1
2
3
div 
      p Welcome.
this is a new plan.and we are working on it.
 
 
In the above example, we can see That the (full stop) ends. It does not see the first word of the line is not a tag. It will print it as a block of text.
 
Hope it helps in understanding the jade.
 
 
 
 
Request for Proposal

Recaptcha is required.

Sending message..