SASS Parent Selector

SASS or LESS are preprocessors and allow you a lot of features, like compiling your CSS, so you have minimized CSS at the end.

But here we have much more options than just compiling the code, we can write in OOCSS, so Object Oriented in CSS. If you already use OOP in other languages you will like it here as well and as soon as you get used to it, maybe you will forget about CSS :)

How do I use the parent selector in SASS ?

Again and again the parent selector is needed if one prefers to be in  BEM Programmed and therefore since v.3.3 of SASS there is the possibility to access them (Ampersand). So we can also developers who do not like it, so the search in the editor can not use make tastier. As ? Quite simply by naming the parent exactly as the class itself, rather than always writing the same;) In most cases, you'll see this:

But this does not make sense, because then I can let it be the same if I do not name it properly and make it harder for other developers. Therefore, every parent in the scope should be named as the class itself, unless it is a small project.

 0  .block .block__elem .block__something  {   1      background: white;  2  }  3  .block .block__elem .block--something  {   4      background: blue;  5  } 

Working in a team with SASS parent selector

So now we would have achieved just that, that we no longer annoy developers. Now if another developer is looking for this class (or even an ID), he can simply switch to the dollar sign if nothing is found and then he will find something. We can now access and nest as often as we want because the parent is in the same named variable.

 SASS parent

And if you think now great I prefer to use LESS, there is this possibility also, but a little different but almost the same principle, so look here once over:  Address LESS parent