I'm not sure how much I agree with this approach. When you do what this article is describing, you are creating a very tight coupling of your css structure to your dom hierarchy. This can create a lot of issues when you are trying to refactor your code or getting new people on-boarded to the project.
These rules can get very confusing when someone tries to edit your HTML by adding classes to a new element they created, only to figure out that those classes don't add any styles in that particular context. Good stylesheets should have classes that have consistent behavior no matter where they are on the page.
That said, I think SCSS (and sass/less) is pretty nifty. The real heavy lifting they do, for me at least, comes from mixins and being able to programmatically create classes.
For an example, look at how the rainbow effect is created on this page: http://html5readiness.com (it's with a for loop in sass, technique is outlined in http://nimbupani.com/notes-from-html5-readiness-hacking.html)