It can be a bit overwhelming to try to find the best resources to learn from, so I have a few SCSS resources to point you in the right direction.
If you’re familiar with CSS, SCSS can be an easy language to get used to. A lot of what you need to know you can find right on sass-lang.com/guide. If you read that page from top to bottom, you’ll get a solid understanding of the language and how it works. Fair warning, the term “Sass” is thrown around pretty loosely. It is commonly used to describe both Sass and SCSS but there is a big difference between the two, as you can see in the examples on sass-lang.
After you get the hang of how those pieces work, check out the the well-documented and very over-kill example I put together below. It uses most of the pieces that you’ll read about on the sass-lang basics, and also a small example of why SCSS is so useful.
CodePen result
CodePen SCSS
A few other sites to bookmark:
CodePen is the easiest way to practice writing SCSS. If you go to codepen.io/pen, you can start a new pen. To use SCSS, click the gear icon in the CSS portion of the window and select Sass (.scss).
CSS-Tricks is worth poking around the whole site. It was founded by Chris Coyier, the man behind CodePen. The link will bring you to Sass snippets, but there are so many useful articles on that site for any aspect of front-end development.
The Sass Way has a lot of examples and is built on contributions from the community, very cool and such a good way to find how others leverage the power of Sass.
This should point you in the right direction toward learning what you need to know to become an SCSS expert and enthusiast. Take it in as small pieces, get used to the parts individually and it will all come together!