SCSS Expand工具

假设你在使用SCSS语法的长项目中工作，并且开始忘记当前规则的嵌套结构。

//... {
        .foo {
          &.bar {
            // what CSS rule is being generated here?
          }
        }
//... }

当然，可以查看生成的CSS，如果生成的样式表不是很复杂的话。但这也要求你同时打开另一个文件并查找行号。大多数时候你只是需要一个直接的答案；在这里，你可能得到这个答案

.bim
.baz
.foo.bar

(因为Sublime Text的警告窗口空间非常小。)

安装和使用

sublime-scss-expander 为你做到这一点。要安装，可以将此存储库放在Sublime的包文件夹中，或者使用更简单的 Sublime Package Control。在Windows/Linux上按 ctrl+shift+p，在Mac上按 cmd+shift+p，调出Sublime的命令面板，然后输入 install package 以调出Package Control的包选择器。它应该是第一个选项。键入 SCSS Expand，再次，它应该是第一个选项，然后按回车。

要使用，将光标定位在你想了解的规则的作用域中，默认情况下按 command-E 以显示该位置的作用域规则。它也作为 SCSS Expand: Expand Cursor Scope 出现在命令面板中。

支持

它支持SCSS的大部分合理用法，包括 SASS 3.3的 @at-root 以及所有可能的参数，以及各种排列组合的 父选择器，还包括联合组合的逗号分隔规则。

.first-rule, .second-rule {
  &:hover {
    font-weight: 500;
  }
}

.first-rule:hover,
.second-rule:hover

.bim {
  @for $thing in (foo bar) {
    .test-#{$thing}-bling {
      width: 20px;
    }
  }
}

.bim .test-#{$thing}-bling

根级不带

@media screen {
  @supports something {
    .foo {
      @at-root(without: rule media) .bar {
        top: 0;
      }
    }
  }
}

@supports something .bar

测试

这里有一堆测试，希望它们能提供良好的覆盖率。这些测试位于scss_expand_test.py中。这并不是直接测试Sublime Text；相反，扩展器已经被推广，可以与任何给定文本中的起始位置以及一个函数一起工作，该函数会根据索引返回文本中该位置的字符。这意味着主Python类SCSSExpander可以导出，供其他项目使用。