Js-beautify: 对 Sass 的 newline_between_rules 支持（增强）

创建于 2015-03-19 · 49评论 · 资料来源: beautify-web/js-beautify

现在v1.5.5 中的newline_between_rules选项仅支持 CSS https://github.com/beautify-web/js-beautify/pull/574
所以，在Sass中嵌套是行不通的。

这是我的test.js文件：

var fs = require('fs');
var beautify_css = require('js-beautify').css;

fs.readFile('test.scss', 'utf8', function(err, data) {
  if (err) {
    throw err;
  }

  console.log(beautify_css(data, {
    indent_size: 2,
    newline_between_rules: true
  }));
});

输出：

$ node test.js

.icons {
  padding: 0;
  li {
    display: inline-block;
  }
  a {
    display: block;
    color: #000;
  }
  a:hover {
    color: #ccc;
  }
}

我希望为Sass添加newline_between_rules支持。
问候。

good first issue css templating enhancement

资料来源

joseluisq

👍55

最有用的评论

请以 👍 对初始帖子的反应进行投票，而不是 +1 消息 - 这不会向订阅者发送垃圾邮件。谢谢！

olets 于 2017-09-22

👍21 🎉3 😄3 ❤2 😕2

所有49条评论

你希望它看起来像什么？

bitwiseman 于 2015-03-19

类似于 CSS 版本https://github.com/beautify-web/js-beautify/pull/574
一般来说，一层嵌套就足够了。
这里有一个例子：

// Icons
.icons {
  padding: 0;

  li {
    display: inline-block;
  }

  a {
    display: block;
    color: #000;
  }

  a:hover {
    color: #ccc;
  }
}

// Button
.button {
  &.primary {
    color: #4183c4;
  }

  &.primary:hover {
    color: lighten(#4183c4, 15%);
  }
}

joseluisq 于 2015-03-20

你好，
这适用于 scss 规则吗？

.old_price {
@include GibsonRegular();
@include字体大小（14）；
颜色：#646464；
左边距：10px；
文字装饰：直通；

.promovalue {
  <strong i="15">@include</strong> GibsonRegular();
}

}

deepak8167 于 2015-05-22

echenley 于 2015-10-09

explorador 于 2016-02-06

chipcullen 于 2016-04-19

spacedawwwg 于 2016-07-07

也许像newline_between_nested_rules: true这样的选项，因为它似乎是嵌套的具体问题？

}和;需要考虑嵌套新行的规则

spacedawwwg 于 2016-07-07

+1，也更少

Billskate 于 2016-07-08

👍5

ms-carterk 于 2016-07-11

nevace 于 2016-08-11

我可以确认这确实是嵌套规则的问题。当前有newline_between_rules: true这个：

body {
  background-color: #FFF;

  > div {
    background-color: #AAA;
  }
}

.container {
  color: blue;
}

变成这样：

body {
  background-color: #FFF;
  > div {
    background-color: #AAA;
  }
}

.container {
  color: blue;
}

newline_between_rules: false这是结果：

body {
  background-color: #FFF;
  > div {
    background-color: #AAA;
  }
}
.container {
  color: blue;
}

因此，应考虑对嵌套规则之间的换行符的支持。

Jakobud 于 2016-09-12

danieloprado 于 2016-09-16

这东西有ETA吗？

gligoran 于 2016-09-21

francislanglois 于 2016-09-24

pacochan 于 2016-10-23

+1 :(

jfily 于 2016-11-28

Startcom 于 2016-12-06

另一个 +1

对不起，噪音。我不知道是否有另一种方式来支持这个。

zimmerboy 于 2016-12-29

@zimmerboy在每条评论的

gligoran 于 2016-12-29

我在beautify-css.js解决方法：

替换 newLine 函数：

        print.newLine = function(keepWhitespace, keepNewLine) {
            if (output.length) {
                if (!keepWhitespace && output[output.length - 1] !== '\n') {
                    print.trim();
                    if (keepNewLine) { output.push('\n'); }
                }

                output.push('\n');

                if (basebaseIndentString) {
                    output.push(basebaseIndentString);
                }
            }
        };

将newline_between_rules条件和语句都更改为：

                    if (newline_between_rules) {
                        print.newLine(false, true);
                    }

注意：这只处理规则之间的换行符，而不是属性之后的规则。有人对此有什么想法吗？

patroza 于 2017-01-13

👍4

@sickboy - 很酷，开始拉取请求，添加一些测试。请随时推进这项工作。

bitwiseman 于 2017-01-13

👍1

这会很快到来吗？这是我使用 beautify for sass 的唯一障碍。

mrahhal 于 2017-01-21

😕1

@mrahhal - 这个问题已经有将近两年的历史了。它接缝@sickboy在这方面做了一些工作。有人只需要通过测试发出拉取请求。

也许你想这样做？请参阅CONTRIBUTING.md 。

bitwiseman 于 2017-01-21

@bitwiseman不幸的是，我没有这种项目的经验，也没有时间。但我的问题是，每个人要么使用纯 CSS，要么只坚持当前格式的工作方式？对于一个非常古老但很容易解决的问题来说，这很奇怪。

@sickboy你在这吗？如果没有人对此积极，也许我会解决它。除了“max_preserve_newlines”的一些奇怪行为之外，这确实是唯一完全阻止我使用美化的东西。

mrahhal 于 2017-01-21

我想知道 pull request #1117（为 css 添加了 preserve_newlines ）是否会对此有所帮助。

zimmerboy 于 2017-01-24

@zimmerboy是的，这似乎是当前问题的解决方案，但我认为是不同的类型。

mrahhal 于 2017-01-24

#1117 会合并吗？它似乎也解决了这个问题。

jorgeramirez 于 2017-02-02

@jorgeramirez - 只是等待修复以前的反馈。

bitwiseman 于 2017-02-02

@bitwiseman太棒了！

jorgeramirez 于 2017-02-03

任何更新？

royduin 于 2017-04-07

👍1

@royduin - 请使用最新版本进行测试。

bitwiseman 于 2017-04-14

它似乎工作正常，但评论有一点问题。我知道 Bootstrap SCSS 不是一个很好的例子，但仍然如此。

这是代码在 repo 上的格式：

这是美化后的：

它按预期工作，但注释与先前的声明重叠，但如果注释格式正确，它可以正常工作：

同样，这并不重要，但 Bootstrap 被广泛使用 :confused:

stgogm 于 2017-04-17

@stgogm
请提交一个新问题。
另外，请包括文字，而不是图像。

bitwiseman 于 2017-04-17

@bitwiseman好的，对不起。只是想指出，如果您尊重 SCSS linter 规则，这并不是一个真正的问题。

stgogm 于 2017-04-18

@stgogm - 很酷，谢谢你的信息。 😄

bitwiseman 于 2017-04-18

👍1

@stgogm设置好后，您可以测试嵌套的newline_between_rules问题吗？和

newline_between_rules: true

请问您

fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;
    &+fieldset {
        margin-top: $padding-large;
    }
}

变得

fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0;

    &+fieldset {
        margin-top: $padding-large;
    }
}

olets 于 2017-04-19

👍2

实际上，这没有什么区别：

编写的代码（中间没有新行）：

form {
  display: block;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
  & + fieldset {
    margin-top: $padding-large;
  }
}

使用"newline_between_rules": false美化后：

form {
  display: block;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
  &+fieldset {
    margin-top: $padding-large;
  }
}

使用"newline_between_rules": true美化后：

form {
  display: block;
}

fieldset {
  border: 0;
  margin: 0;
  min-width: 0;
  padding: 0;
  &+fieldset {
    margin-top: $padding-large;
  }
}

它只是删除了+之间的空格。

js-beautify --version
1.6.12

stgogm 于 2017-04-20

谢谢@stgogm！所以不， @bitwiseman #1146 没有解决这个问题

olets 于 2017-04-21

另一个“newline_between_rules”对于 SCSS 来说不够用的例子：

$variable: #333;
div {
  display: none;
}

格式化此 SCSS 不会在变量和 div 选择器之间添加新行。

vvs 于 2017-06-18

此功能何时可用是否明确？

dehghani-mehdi 于 2017-07-08

它有什么进展吗？

whxaxes 于 2017-07-15

@dehghani-mehdi @whxaxes
此功能未分配。它需要有人来实现它并添加测试。

bitwiseman 于 2017-07-25

👍4

giubatt 于 2017-08-23

RenaldasK 于 2017-08-28

martinsimonovski 于 2017-08-29

nerdmax 于 2017-09-03

ciel 于 2017-09-22

请以 👍 对初始帖子的反应进行投票，而不是 +1 消息 - 这不会向订阅者发送垃圾邮件。谢谢！

olets 于 2017-09-22

👍21 🎉3 😄3 ❤2 😕2

此页面是否有帮助？

0 / 5 - 0 等级

Js-beautify: 对 Sass 的 newline_between_rules 支持（增强）

最有用的评论

所有49条评论

相关问题