usage of & character in sass

Photo by Francisco Gomes

i have seen this common use of & character in writing sass styles to refer to parent selector:

which compiles into below css:

this is clean in how we did not have to write parent selector again and used & instead.

what i have seen less commonly used is the fact that we can not only use & chracter at the beginning of defining our sass styles but at the end also. for example, we want all our divs with a certain style but if there is a div inside .parent we want it to have slightly different styles:

in fact, we can put & character anywhere in the selector rule and achieve more complex css rules:

this is pretty cool(sassy cool ;)) and we all should be eyeing for the opportunities where we can use this trick to write more efficient sass code.