sassidephpstormwebstormphpstorm-2016.1

SCSS variables alignment in PhpStorm

How to easily format fragments of code like the one below in PhpStorm?

before:

$some-var-1: 0;
$some-longer-name: 1px solid true;
$some-variable: 3px;

.className {
  border:       $some-longer-name;
  padding   :    $some-variable; 
}

after:

$some-var-1      : 0;
$some-longer-name: 1px solid true;
$some-variable   : 3px;

.className {
  border: $some-longer-name;
  padding: $some-variable; 
}

As you can see variable assignments are formatted in one way and the rest of the code in another way.

By default I can set auto formatting so it formats like it's .className but how can I make PhpStorm so the variables format in the way shown in the second example? It would be best if I could format all cases in one file at once.

Solution

  • Currently it's not possible.

    https://youtrack.jetbrains.com/issue/WEB-9211 -- watch this ticket (star/vote/comment) to get notified on any progress.