Nesting and Functions in Css

Nesting is styling the child elements of a parent element within its styling. If we need to style a child element we add its parent name before it so that the CSS will know that what we are pointing to. Sass allows us to not, again and again, refer to the parent element by nesting the child elements within it.

Confusing! Let's see an example

Consider it as our HTML file.

<nav class="navbar">
  <ul>
    <li>Home</li>
    <li>Store</li>
    <li>Contact Us</li>
  </ul>
</nav>

Normal styling scenario:

.navbar {
  background-color: orangered;
  padding: 1rem;
}
.navbar ul {
  list-style: none;
}
.navbar li {
  text-align: center;
  margin: 1rem;
}

The parent class name is repeated a lot of times maybe it may not look hard to do for simple styling but when you are building something which contains lots of content then it is necessary to use nesting.

Sass Code:

.navbar {
  background-color: orangered;
  padding: 1rem;
  ul {
    list-style: none;
  }
  li {
    text-align: center;
    margin: 1rem;
  }
}

In the above code, all the child elements are placed inside the parent elements styling block. You may have come through the normal CSS code mentioned above. That what this SCSS code will look like after Compilation.

Functions

Functions are used to manipulate the value and return value. In functions we can use arithmetic operators to manipulate the values.

Syntax:

@function name($argument) {
  @return $value
}

Example:

In this example we will make a function which will accept two values and add it then return it.

@function add-numbers($first-number, $second-number) {
  @return $first-number + $second-number
}

Like any normal function, even this function should be called

.box1 {
  padding: add-numbers(5px, 10px);
}

The below code is Compiled CSS code

.box1 {
  padding: 15px;
}

Functions can be used for multiple purposes depending on your requirement.

Nesting and Function in Sass

Functions