Is there any tooling around SCSS variables / breakpoints?
Aside from code complete, is there any tooling around SCSS variables?
I was thinking something like panels for colours, fonts, and especially breakpoints.
With the amount of variables that build up in projects, especially with multiple developers and personal preferences, it would be really nice to have some kind of extra support.
Or if none, what strategies (naming, snippets, etc) do folks use to stay on top of things?
Cheers,
Dave
请先登录再写评论。
Hello,
What panels exactly? To choose colors and fonts from? Do you have any ideas about how this would look? We have a color picker but fonts and breakpoints are up to the user.
You can always submit your feature requests to our tracking system here: <http://youtrack.jetbrains.com/issues/WEB#newissue=yes>.
You will be able to receive the answer directly from our developers while other users will be able to write their opinion of your proposal.
It's not possible to set breakpoints in SCSS (and I'm not actually sure what can they be used for - SCSS code is not executed, so can hardly be debugged).
As for panels for colors/fonts, I'm not sure what they should look like. You can preview/set colors using icons in the gutter (see https://www.jetbrains.com/help/webstorm/2016.3/changing-color-values-in-style-sheets.html). Fonts can't be previewed/changed this way, please vote for https://youtrack.jetbrains.com/issue/WEB-23709 if you miss this feature
Hi Elena,
I meant specifically to media query breakpoints like max-width etc:
@include breakpoint($mobile-break) {margin-bottom: $unit * 4;
}
Unfortunately on larger / longer projects with many developers you can't always name things so they're perfectly obvious, or the value of the variable may not always be intuitive in certain contexts.
When working on SCSS stylesheets with lots of variables, it can be difficult to know what everything is unless you click through:
As Vladimir mentioned, maybe a panel showing available or commonly-used units, a picker, or maybe better hovering support; just mechanisms to shorten the gap between seeing and understanding. For example, the colour swatch in the margins must be doing some calculating behind the scenes, it would be cool to think of other ways to make working with SCSS variables more intuitive.
I'll have a think about things, and maybe I'll submit some feature ideas for discussion.
Thanks,
Dave
note that you can always use View | Quick Definition on your variable to see what its definition looks like, or open the file where it's defined using Ctrl+click...
Yeah, CTRL+click is what I normally do.
Some kind of live, pinnable quick definition would be a useful addition!
Would be like the Scope panel in Chrome.
Please vote for https://youtrack.jetbrains.com/issue/IDEA-163590
Note that tracking of selection ('live' definition preview) may have negative impact on performance - see https://youtrack.jetbrains.com/issue/IDEA-116188#comment=27-625523