How do I enable the Less properties as variables feature in WebStorm?
When I try to use the properties as variables in Less WebStorm reports it as an error but my code compiles without any error.
Even when I do something as simple as this:
body {
color: black;
button {
border-color: $color;
}
}
I searched on web but it seems like I'm the only one to have this issue. I hope someone has a solution.
It's not currently supported: it's a brand new functionality (since Less v3) that is not yet implemented in WebStorm.
https://youtrack.jetbrains.com/issue/WEB-31443 -- watch this ticket (star/vote/comment) to get notified on any progress.
Related
I am attempting to change the styling of Sanity Studio as noted here in the docs: https://www.sanity.io/docs/styling#d7f9b5cc2adb
As such, I have created a file with the following css variables:
#import "part:#sanity/base/theme/variables/gray-colors-style";
:root {
--fieldset-border: none;
--fieldset-bg: var(--gray-darker);
}
Now, this works as I want for --fieldset-border, but it does not work for --fieldset-bg. I even tried hard-coding the value of --fieldset-bg as follows: --fieldset-bg: #454545; -- it still did not work.
So, I am wondering, why does --fieldset-border work and --fieldset-bg not work. More importantly, what do I have to do so that I can change the background color of fieldsets in sanity studio?
I have a hunch that the specific --fieldset-bg variable got silently deprecated recently (the move from #sanity/components to #sanity/ui). IF that's the case, opening a bug report issue in sanity-io/sanity repository would be great!
Regardless if that's the case, I'd suggest overwriting the css with a global selector in your variableOverrides.css file:
div[class^="DefaultFieldset_root"] {
background: papayawhip;
}
Hope this helps 🙌
I am developing in IntelliJ IDEA mainly scss and js. When I want to type
th, td {
some style
}
Intellij autocompletes td to "text-decoration:;" (and th to text-height) which is highly annoying. I have checked all my settings and plugins and am currently lost. I have the setting "Code Completion > Insert selected suggestion" turned off under "Show suggestions as you type".
My enabled custom plugins are Emmet Everywhere, Save Actions and Vue.js. Disabling those does not solve anything.
I would honestly love to enable autocompletion per language/per extension and not as a global setting.
Any thoughts?
As #lena pointed out, Settings > Live templates > By default expand with was set on space which caused this behaviour. With so many options it can sometimes be hard to find unusual settings.
In addition to this great Q&A, found at Visual Studio Code Theming - change editor error indicator, I am curious what setting / scope controls the font color during an error output in a CSS file? I'd like to be able to change the default value. Thank you in advance.
As you can see with the Developer: Inspect TM Scopes command, it doesn't really seem to have a specific "error scope", just the standard meta.selector.css that other selectors also have:
Depending on what you want to do, that might still be good enough. Selectors without an error appear to have an additional, more specific scope like entity.name.tag.css according to which they're colored. So if you change the color of meta.selector.css, other selectors are still colored differently (at least with the default theme):
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "meta.selector.css",
"settings": {
"foreground": "#fff"
}
}
]
}
If you write #keyframes in a css file in IntelliJ IDEA it suggests you animation names like blink, dance, fadein, fadeout etc.
Is it just a name suggestion function? Can I get the implementations behind these names somehow from IDEA? I guess you have the same functionality in Webstorm too.
WebStorm and IDEA are collecting all #keyframe names in the project during indexing. All these names are suggested in completion when you write #keyframes or animation-name:.
Showing an implementation behind a suggested name is not implemented yet (WebStorm 2016.3.3). I've filed a feature request about it, you may want to vote for it to get updates on its progress: https://youtrack.jetbrains.com/issue/WEB-25641
I found this link on how to embed custom fonts in XAML apps. Is there some way I can achieve the same while building using JS? The following method did not work.
#font-face {
font-family: "MimicRoman";
src: url("/fonts/MimicRoman.otf") format('opentype');
}
Looks ok to me, that's how it should work. You are sure the path to the font file is correct and you did also actually use the font-face somewhere? For instance,
body {
font-family: MimicRoman;
}
Also, you are sure there are no other font-family declarations taking precedence over the declaration you've made? (this can be seen quite easily with the DOM Explorer).
If nothing else works, you might want to test some other font file, just in case that file is corrupt or something (some working examples from here, for instance).