ctrl+shift+p filters: :st2 :st3 :win :osx :linux
Browse

SCSS Expander

by garetht ST2/ST3

Expands the SCSS rule in the current cursor scope.

Details

Installs

  • Total 20K
  • Win 12K
  • OS X 6K
  • Linux 2K
May 27 May 26 May 25 May 24 May 23 May 22 May 21 May 20 May 19 May 18 May 17 May 16 May 15 May 14 May 13 May 12 May 11 May 10 May 9 May 8 May 7 May 6 May 5 May 4 May 3 May 2 May 1 Apr 30 Apr 29 Apr 28 Apr 27 Apr 26 Apr 25 Apr 24 Apr 23 Apr 22 Apr 21 Apr 20 Apr 19 Apr 18 Apr 17 Apr 16 Apr 15 Apr 14 Apr 13 Apr 12
Windows 1 7 9 10 7 9 7 3 4 6 5 6 11 7 7 5 9 15 5 5 8 5 5 7 2 8 7 5 6 5 6 9 12 12 18 7 4 4 14 10 6 8 2 6 7 13
OS X 1 0 1 0 6 5 4 1 0 6 3 0 2 2 0 2 1 4 1 4 1 0 3 5 2 3 3 3 3 0 2 3 2 3 2 1 2 4 4 2 6 4 3 2 4 1
Linux 0 1 1 3 3 5 3 1 0 1 3 1 2 1 0 0 2 3 1 2 2 1 1 1 0 4 2 2 3 3 1 2 2 0 1 2 0 2 0 2 1 2 0 1 1 0

Readme

Source
raw.​githubusercontent.​com

SCSS Expander

Build Status

Suppose you're working on a particularly long project written using the SCSS syntax, and you're starting to forget the nesting structure of the current rule is.

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

It's possible to look at the generated CSS, of course, if the generated stylesheets are not too complex. But even that requires keeping another file open somewhere and hunting for line numbers. Most of the time you just want an answer straight away; here, you might get this answer:

.bim
.baz
.foo.bar

(because Sublime Text's alert window has remarkably little space.)

Installation and Usage

sublime-scss-expander does that for you. To install, either place this repository in the Sublime packages folder or use the far simpler Sublime Package Control. Press ctrl+shift+p on Windows/Linux and cmd+shift+p on a Mac to bring up Sublime's Command Palette, then type install package to bring up Package Control's package selector. It should be the first selection. Type SCSS Expander which, again, should be the first selection, and then hit enter.

To use, position the cursor in the scope of the rule you want to know about, and press command-E by default to show the rule that is in scope at that position. It is also available in the command palette as SCSS Expander: Expand Cursor Scope.

Support

It supports most sane uses of SCSS, including SASS 3.3's @at-root with all possible arguments, various permutations of the parent selector as well as combinatorically combined comma-separated rules.

Because it is not a parser, it works only when you give it correct code. It does not expand content-blocks that masquerade as rules. It does not even attempt to peek inside any imports.

Examples

Here are a few examples of how it works. In each case assume the cursor is placed in the innermost scope. All examples are drawn from the tests; look in the test file for more.

Comma-separated rules

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

Interpolated variables

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

At-root without

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

Tests

There's a mound of tests which hopefully give good coverage. These are located in scss_expand_test.py. This does not test Sublime Text directly; instead, the expander can and has been generalized to work with any piece of text given a starting position within that text and a function that, given an index, returns the character at that position within the text. This means that the main Python class, SCSSExpander, can be exported for use with other projects.