SASS nesting

This tutorial covers basics of SASS nestings with examples..

nestings selectors rules

Nesting is process of placing an child element inside parent element. In Html, element is a tag , Scss or css, element is selectors or html tags We already know html document has nested tags like as below

<html>
    <head>
        <meta>
    </head>
    <body>
        <div class="container">
            <div class="left">
                <ul>
                    <li><a href="link1">link</a></li>
                </ul>
            </div>
        </div>
    </body>
</html>

CSS selectors are nested side by side

With scss rules, nesting is process of placing selectors inside other selectors, Advantages is you define the one rule selector nested inside other selector.

.left {
  ul {
    margin: 1px;
    padding: 1px;
    list-style-type: square;

  }
  li {
    display: inline-block;
  }
  a {
    display: block;
    background-color: blue;
  }
}

left is parent selector, ul,li and a are child selectors output contains outer rules are combined with inner rules using spaces output of css is

.left ul {
  margin: 1px;
  padding: 1px;
  list-style-type: square;
}
.left li {
  display: inline-block;
}
.left a {
  display: block;
  background-color: blue;
}

custom selectors list

selectors can also be applied with class selectors and others too (id selector) as well as combinations

.leftnav, .rightsidenav {
  a {
  text-decoration: underline;
  padding:2px 1px 2px 1px;
  }
}
.leftnav a, .rightsidenav a {
  text-decoration: underline;
  padding: 2px 1px 2px 1px;
}

Nested media queries

media queries for selectors also nested The following selector applies when screen size is small

.leftside {
        position: fixed;
        height: 100vh;
        width: 200px;
        z-index: 2;
        top: 0;
        left: 0;
        right:0;
        bottom:0;
        background-color: white;

        @media (max-width:400px) {
            padding: 0px 0px 0px 32px;
            margin: 0px;
            text-decoration: none;
            color: #023c2c;
            display: block;

        }
}

generated css is

.leftside {
  position: fixed;
  height: 100vh;
  width: 200px;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
}
@media (max-width: 400px) {
  .leftside {
    padding: 0px 0px 0px 32px;
    margin: 0px;
    text-decoration: none;
    color: #023c2c;
    display: block;
  }
}

Nesting proerties

with CSS, We can defined the margin for any html element using below syntax each property name complete name separated by hypen.

.leftnav {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
}

With SCSS, The syntax is first we define property name with colon by defining property values enclosed in braces

.leftnav {
    // variable declared for margin
    $margin: 20px;
    margin: {
        left: $margin;
        right:$margin;
        bottom: $margin ;
        top:$margin;
    }
}

Generated css is

.leftnav {
  margin-left: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
  margin-top: 20px;
}
Prev