How to change selector layout on sass / compass compile?

Compass is outputting selectors side-by-side instead of line-by-line, which makes it harder for user edits.

What settings are necessary to create stacked selectors as shown below?

I have here this scss block:

.main-content{
    padding-top: 20px;
    header.page-header{
        display: none;
        margin-top: 0;
        h1{
            margin-top: 0;
        }
    }
    #content .page, #content .single{
        li{
            list-style-type: none;
            &:before {    
                font-family: 'FontAwesome';
                content: '\f105';
                margin:0 5px 0 -15px;
                @include opacity(.6);

            }     
            ul{
                li{
                    &:before{
                        content: '\f101';
                        font-family: 'FontAwesome';
                        padding-right: 5px;
                        padding-top: 1px;
                        @include opacity(.5);


                    }   
                }
            }
        }
    }
}

It outputs like this:

.main-content #content .page li ul li:before, .main-content #content .single li ul li:before {
  content: '\f101';
  font-family: 'FontAwesome';
  padding-right: 5px;
  padding-top: 1px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}

Whereas it would be better for the user to output this way:

.main-content #content .page li ul li:before, 
.main-content #content .single li ul li:before {
  content: '\f101';
  font-family: 'FontAwesome';
  padding-right: 5px;
  padding-top: 1px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5;
}

Solution

There is no such output style that will produce the desired format. You will need to use a 3rd party application to do so (eg. css beautify).