nesting’s selector’s rules

Nesting is the process of placing a child element inside the parent element. In Html, the element is a tag, Sass or CSS, the 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 the process of placing selectors inside other selectors, The advantage is you define the one rule selector nested inside another 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 the output contains outer rules combined with inner rules using spaces the 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 in SASS

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;
}

SASS Nested media queries

media queries for selectors also nested The following selector applies when the 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 properties in SASS

with CSS, We can define the margin for any HTML element using the below syntax each property name complete name separated by a hyphen.

.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;
}
FeatureDescription
Variablesprovides variables to store and use in multiple places
DatatypesData types allows to specify the allowed values for a variables
MixinsAllows to reuse the styles
[Operators]provides arithmetic operators
partialshas block of styles as a file included in other files
Syntaxmakes the modular approach to have namespaces
[Inheritence]share and extend the styles
Debugdebug the style code to fix the issues