hello fellow webdevelopers,
I'm a newbie to SASS, developing with Intellij IDEA Ultimate. I copied the font-awesome.scss file from the fontawesome/sass directory to my project and I got a few errors from the IDE, mainly at constructs like this:
.btn, .nav-tabs {
[class^="icon-"],
[class*=" icon-"] {
/* keeps button heights with and without icons the same */
line-height: .9em;
}
}
it keeps nagging about the colon , as separator between [class^="icon-"] and [class*=" icon-"].
but if the section looks like this
a [class^="icon-"],
a [class*=" icon-"] {
display: inline-block;
text-decoration: inherit;
}
everything looks fine.
furthermore, in the generated font-awesome.css file, there are some obvious errors as text-decoration: inherit; is definitely no valid CSS value. Could it be that these are bugs, or am I getting something wrong here?
how should I change the syntax at the above shown scss file to prevent the errors?
I'd like to use the font-awesome.scss as I'm also planning to use SASS for the whole project and it would be cool if I could use fontawesome the same way.
any suggestions on this?
The sample code provided is valid Sass and compiles as it should. Your IDE is just missing the proper syntax highlighting for Sass.
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 🙌
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.
I am working on a Bootstrap template that I am building on the Bootstrap 3.3.1 LESS files compiled on the go (as a temporary solution) with less.min.js. The problem is when I try to flip slides of the Bootstrap carousel they do so with no animation. Chrome Dev tools gave me this:
.carousel-inner > .item {
transition: transform 0.6s ease-in-out;
backface-visibility: hidden;
perspective: 1000;
}
As you can see there is not -webkit-transition line for some reasons.
Switching to bootstrap.css or replacing the carousel.less file with that from v3.3.0 resolves the issue. Is it a Bootstrap issue or is it something on my side?
You should run the autoprefixer (since version 3.2), also see https://github.com/twbs/bootstrap/issues/15203
Cause your are compiling client side, you can NOT run this plugin. Alternatively you can use -prefix-free.
Notice that the autoprefixer is part of TB default build process now.
Thought they were supposed to use mixins internally until v4
Yes, probably. But i seems new added code is not longer prefixed by mixins. Code that used a mixin before v3.2. already, are not replaced before v4.
You can see the above in the less/carousel.less file, that contains the following code (reflecting your issue):
// WebKit CSS3 transforms for supported devices
#media all and (transform-3d), (-webkit-transform-3d) {
transition: transform .6s ease-in-out;
backface-visibility: hidden;
perspective: 1000;
In my web project I have split my CSS into separate LESS files for maintenance reasons. I have a file called config.less acting as a master file that imports the other less files, using #import directives.
The problem with this setup seems to be that I get a lot of "Undeclared variable" & "Undeclared mixin" while editing my LESS files, for instance while adding a property variable called #textColor in base.less, that is declared in another less file called variables.less. Is there any way of making web essentials aware of variables and mixins being defined in external less files?
Another thing that seems to be tripping up Web Essentials is when I'm using the nested media query feature of LESS:
.some-selector {
background: #000;
#media only screen and (max-width: 800px) {
background: #fff;
}
}
The nested #media declaration gets a red underline, and on hover it says "Unexpected '#' block in the style rule". Hovering the nested background property shows a "Validation: 'color' isn't a valid HTML tag.
I cannot give an answer regarding the #media issue with Web Essentials, but I can give advice on the variables and mixins issue.
Basically, change your config.less file to have the variables.less and any other mixin files to be #import-once, then also add #import-once 'variables.less into each file that uses variables from it (do the same for any mixin files used).
What this does is imports the file if you are working on it (like your base.less), but when all the files are compiled by config.less, it will only import the variables.less once, and not again for each file that also references the variables.less.
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).