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

时间:2014-12-13 23:56:53

标签: css sass css-selectors 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;
}

1 个答案:

答案 0 :(得分:1)

没有这样的输出样式会产生所需的格式。您需要使用第三方应用程序(例如css beautify)。

相关:Why is Sass striping semicolons?