sass - Sublime Text 2 Sass 闭括号

Question

我正在使用 SublimeSaveOnBuild。当我的 scss 文件编译为 css 时，生成的代码显示右大括号，如下所示：

.content {
    padding-left: 10px; }

我希望它以传统格式生成右大括号：

.content {
    padding-left: 10px; 
}

有谁知道如何自动完成此操作，以便它在自己的行上编译每个带有右括号的选择器？

Answer 1

有一个名为 Sass 的设置style来控制输出的外观。默认值为nested，这就是您所看到的：只需将其切换到expanded，您将获得您想要的更传统的外观。

请参阅文档以找到为您的设置更改它的正确方法。

这是文档中的一个示例，显示了它的外观：

// nested
#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }

// expanded
#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}

Answer 2

如果您使用 Grunt，添加这样的选项可能会有所帮助（使用 grunt-contrib-sass）：

sass: {
      dist: {
        options: {
            style: 'expanded'
        }, 
        files: {
            'style.css' : 'sass/style.scss'
        }
      }
    }