Learn
Your First Sass Stylesheet
Nesting Properties

Congrats, you’ve written your first nested selectors!

In SCSS, nesting is not limited only to selectors. You can also nest common CSS properties if you append a : colon suffix after the name of the property.

For example, the following SCSS code:

.parent { font : { family: Roboto, sans-serif; size: 12px; decoration: none; } }

will compile to the following CSS:

.parent { font-family: Roboto, sans-serif; font-size: 12px; font-decoration: none; }

Instructions

1.

In main.scss, nest the following properties inside of .banner:

border : { top: 4px solid black; bottom: 4px solid black; }

Click “Run” to see your changes in the browser and view the output in main.css.

Folder Icon

Sign up to start coding

Already have an account?