syntax of SASS

Now, we have all setup for writing our very first SASS syntax. Open your favorite editor and type something like below.


SASS syntax

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

This will return us something like this

CSS syntax

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Look at the SASS code again, what we are doing there? we are just nesting our CSS rules into a parent CSS class. In our typical CSS when we need to create a nave bar, we simply take a parent class which is “.nav” and inside we take unordered ist like, “.nav ul” and take “li” and “a”. each time we have to create a separate code of block for a specific “DIV”.

SASS gives you empower that you can modularize your CSS code of block, If you have a look again on SASS code, we are doing the same our parent which is “nav” and all their siblings are wrap around inside the “nav”. when we will compile our .SCSS (SASS file) you will see the same result as you can see above on CSS code. At the end we will learn how to compile .SCSS file, But before this you have to learn all basic rules of writing SASS.