如何在 sass / compass 编译时更改选择器布局？答案

【问题标题】：How to change selector layout on sass / compass compile?如何在 sass / compass 编译时更改选择器布局？
【发布时间】：2014-12-14 09:14:51
【问题描述】：

Compass 是并排输出选择器而不是逐行输出，这使得用户编辑变得更加困难。

如下所示创建堆叠选择器需要哪些设置？

我这里有这个 scss 块：

.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);


                    }   
                }
            }
        }
    }
}

输出如下：

.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;
}

而用户以这种方式输出会更好：

.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;
}

【问题讨论】：

标签： css sass css-selectors compass

【解决方案1】：

没有这样的输出样式会产生所需的格式。您需要使用 3rd 方应用程序来执行此操作（例如 css 美化）。

相关：Why is Sass striping semicolons?

【讨论】：

听起来不错。我将只使用 python 脚本作为输出文件。