The case against SASS nested CSS selectors

For a long time I have been a proponent for LESS. Simple, basic, and does what matters most - CSS compilation from multiple sources. While SASS comes with a variety of merits, the supposed "benefit" that people seem to often enjoy is the ability to nest CSS selectors. Those in the DRY (Don't Repeat Yourself) mindset absolutely love this feature. Personally, I hate it. I hate it for the simple reason that I don't believe that this mess:

.show-some-thing .show-another-thing {
   color: #FFF;
   margin: 10px;

   .some-ugly-button {
      background-color: blue;
      border: 1px solid red; 

      .selected {
         background-color: green;
      }
   }
}

offers enough of a benefit from the supposed "conciseness" to offset the eyesore that it causes.

Sure, this might not be as "concise", but it sure is easier to read and debug:

.show-some-thing .show-another-thing {
   color: #FFF;
   margin: 10px;
}

.show-some-thing .show-another-thing .some-ugly-button {
   background-color: blue;
   border: 1px solid red; 
}

.show-some-thing .show-another-thing .some-ugly-button .selected {
   background-color: green;
}

And that's just a basic example. The more nesting, the harder it is to read SASS nested code. My advice - don't do nest your CSS.