css - gulp-sass 多重选择器的新行

Question

我要 build

.btn-default {
    color: #ccc;

    &:hover,
    &:focus {
        color: #ddd;
    }
}

进入

.btn-default {
    color: #ccc;
}

.btn-default:hover, 
.btn-default:focus {
    color: #ddd;
}

但相反，它比较成

.btn-default {
    color: #ccc;
}

.btn-default:hover, .btn-default:focus {
    color: #ddd;
}

另一方面，它在没有 & 的情况下工作正常

a,
.btn {
    color: #ccc;
}

进入

a,
.btn {
    color: #ccc;
}

那么，如何将&构建成多行呢？

我使用 gulp-sass。选项可用here .

Answer 1

Sass只提供4种编译输出样式:
( https://github.com/sass/node-sass#outputstyle )

:嵌套 :扩展 :紧凑 :压缩

没有办法得到你想要的结果，但你可以使用类似的东西:https://github.com/csscomb/csscomb.js对其进行格式化。