Sass – Notes

Concatenating Selectors Together

For concatenating selectors together when nesting, you need to use (&) to specify the parent selector.

.class {
    margin:20px;
    &:hover {
        color:yellow;
    }
}

p {
    margin: 2em auto;

    > a {
        color: red;
    }

    &:before {
        content: "";
    }

    &:after {
        content: "* * *";
    }
}

Target elements inside an element

You just need to specify the direct child relationship of the top label

SASS.loginField 
    {

       > label 
       {
       color:red;
       }

       & form{ /* note the space */

             label{
             color:green
             }
        }
     }

CSS

.loginField > label {
  color: red;
}
.loginField form label {
  color: green;
}