scss格式：缩进和嵌套深度

我在我的ionic 3项目中有一个scss文件，当我运行此命令时：npm run scss lint要测试scss语法，我在cmd中得到了这些警告：

src/pages/profile/profile.scss:3:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:9:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:15:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:20:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:28:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:33:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:37:1 [W] SelectorDepth: Selector should have depth of applicability no greater than 3, but was 4
src/pages/profile/profile.scss:37:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:38:1 [W] Indentation: Line should be indented 4 spaces, but was indented 3 spaces
src/pages/profile/profile.scss:39:1 [W] Indentation: Line should be indented 4 spaces, but was indented 3 spaces
src/pages/profile/profile.scss:42:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:47:1 [W] SelectorDepth: Selector should have depth of applicability no greater than 3, but was 5
src/pages/profile/profile.scss:47:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:53:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:57:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:61:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:68:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:72:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:79:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:85:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:93:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:97:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:101:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:108:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:115:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:120:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:128:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:132:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:136:1 [W] SelectorDepth: Selector should have depth of applicability no greater than 3, but was 4
src/pages/profile/profile.scss:136:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:143:1 [W] SelectorFormat: Selector `Progress-main` should be written in hyphenated BEM (Block Element Modifier) format
src/pages/profile/profile.scss:143:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:150:1 [W] SelectorFormat: Selector `Progress-main` should be written in hyphenated BEM (Block Element Modifier) format
src/pages/profile/profile.scss:150:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:154:1 [W] SelectorFormat: Selector `Progress-main` should be written in hyphenated BEM (Block Element Modifier) format
src/pages/profile/profile.scss:154:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:158:1 [W] SelectorFormat: Selector `Progress-bar` should be written in hyphenated BEM (Block Element Modifier) format
src/pages/profile/profile.scss:158:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:164:1 [W] SelectorFormat: Selector `Progress-value` should be written in hyphenated BEM (Block Element Modifier) format
src/pages/profile/profile.scss:164:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:165:23 [W] HexLength: Color `#0000ff` should be written as `#00f`
src/pages/profile/profile.scss:170:1 [W] Indentation: Line should be indented 2 spaces, but was indented 1 spaces
src/pages/profile/profile.scss:170:3 [W] NameFormat: Name of variable `progress_bar_colour` should be written in all lowercase letters with hyphens instead of underscores
src/pages/profile/profile.scss:172:1 [W] SelectorFormat: Selector `Progress-label-left` should be written in hyphenated BEM (Block Element Modifier) format
src/pages/profile/profile.scss:172:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:182:1 [W] SelectorFormat: Selector `Progress-label-right` should be written in hyphenated BEM (Block Element Modifier) format
src/pages/profile/profile.scss:182:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:193:1 [W] SelectorFormat: Selector `Progress-label-center` should be written in hyphenated BEM (Block Element Modifier) format
src/pages/profile/profile.scss:193:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:202:1 [W] SelectorFormat: Selector `Progress-main` should be written in hyphenated BEM (Block Element Modifier) format
src/pages/profile/profile.scss:202:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:209:1 [W] SelectorFormat: Selector `Progress-main` should be written in hyphenated BEM (Block Element Modifier) format
src/pages/profile/profile.scss:209:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:213:1 [W] SelectorFormat: Selector `Progress-main` should be written in hyphenated BEM (Block Element Modifier) format
src/pages/profile/profile.scss:213:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:214:17 [W] NameFormat: Name of variable `progress_bar_colour` should be written in all lowercase letters with hyphens instead of underscores
src/pages/profile/profile.scss:217:1 [W] SelectorFormat: Selector `Progress-main` should be written in hyphenated BEM (Block Element Modifier) format
src/pages/profile/profile.scss:217:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:221:1 [W] SelectorFormat: Selector `Progress-main` should be written in hyphenated BEM (Block Element Modifier) format
src/pages/profile/profile.scss:221:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:226:1 [W] SelectorFormat: Selector `Progress-bar` should be written in hyphenated BEM (Block Element Modifier) format
src/pages/profile/profile.scss:226:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:228:23 [W] NameFormat: Name of variable `progress_bar_colour` should be written in all lowercase letters with hyphens instead of underscores
src/pages/profile/profile.scss:232:1 [W] SelectorFormat: Selector `Progress-value` should be written in hyphenated BEM (Block Element Modifier) format
src/pages/profile/profile.scss:232:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:238:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2
src/pages/profile/profile.scss:245:3 [W] NestingDepth: Nesting should be no greater than 1, but was 2

这是我粘贴在pastbin中的scss文件

---

你能给我一些链接来帮助我格式化scss文件吗，或者有没有任何插件可以在visual code editor上配置。我花了很多时间来解决缩进和嵌套深度的问题。

错误

嵌套深度：嵌套不应大于1

不涉及大括号嵌套，它指的是选择器嵌套

请记住，SASS中的括号嵌套只是为了使源代码更具可读性

比如说,

div {
    a {
      font-size: 15px;
    }
}

这只是甜言蜜语

div a {
    font-size: 15px;
}

这意味着，从你的例子来看：

page-profile {
   .profileinformations> h1 > ion-icon {
     font-size: 15px;
     color: color($colors, icon-color);
   }
}

---

嵌套深度为4:

页面配置文件。配置文件信息>h1>离子图标

错误

嵌套深度：嵌套不应大于1

不是指大括号嵌套，而是指选择器嵌套

请记住，SASS中的括号嵌套只是为了使源代码更具可读性

比如说,

div {
    a {
      font-size: 15px;
    }
}

这只是甜言蜜语

div a {
    font-size: 15px;
}

这意味着，从你的例子来看：

page-profile {
   .profileinformations> h1 > ion-icon {
     font-size: 15px;
     color: color($colors, icon-color);
   }
}

---

嵌套深度为4:

页面配置文件。配置文件信息>h1>离子图标

请不要将链接设为代码块。你希望人们如何点击它？第一条规则（

page profile{…

是否正确？请尝试修复它并检查是否有任何更改。行应该缩进4个空格，但缩进了3个空格：这是错误的缩进。请修复为有4个空格或使IDE正确缩进。请不要将链接设为代码块。您希望人们如何单击它？第一条规则（

页面配置文件）{…

是否正确？请尝试修复它并检查是否有任何更改。行应该缩进4个空格，但缩进了3个空格：这是错误的缩进。请修复为有4个空格或使IDE正确缩进。