My Netbeans IDE show me error when I'm using css variables.
For example, this lines of code will return an error:
:root {
--main-bg-color: #dad66f;
}
.title {
color: var(--main-bg-color);
}
I found this solution online:
https://bugzilla-attachments-262769.netbeans.org/bugzilla/attachment.cgi?id=160370
But I don't know how to install this patch.
Anyone have idea how I can stop showing this code as an error?
Thanks :)
I've just checked and in the current latest Netbeans IDE version(11.3) CSS variables are working fine.
Related
I have the Prettier extension added to my VS Code editor.
When using Less or Sass, the default settings format code like this:
// Default
.parent_selector {
.child_selector {
color: red;
}
}
// Desired Format
.parent_selector {
.child_selector {
color: red;
}
}
How could I tweak the Prettier CSS settings to achieve this? I know it seems trivial, but in bigger code bases it helps readability.
As an alternative method; It can be achieved by using stylelint plugin and stylelint-config-standard rules.
npm install --save-dev stylelint stylelint-config-standard
After installing them, proceed with ctrl+shift+p on VS Code and run command: stylelint: fix all auto-fixable problems.
PS: Consider assigning a keyboard shortcut for stylelint: fix all auto-fixable problems command for easy access.
I am using Angular5 with sass v1.3.2.
I want to be able to change a color that is used extensively in the scss files of my single page app in runtime (not by compiling new files).
The color is defined globally in my _variables.css as:
$brand: #123123;
And for example used as:
h1 {
color: $brand;
}
I learned that I can modify the color if I am using CSS variables such as:
# CSS
:root {
--brand: #123123
}
#JS
document.documentElement.style.setProperty('--brand', '#456456');
# OR
document.querySelector(':root').style.setProperty('--brand', '#456456');
However to be able to do that using SCSS, I needed to use css-vars mixin as such:
$brand: #123123;
:root {
#include css-vars((
--brand: #{$brand},
));
}
And use it as:
h1 {
color: var(--brand);
}
Two problems:
Actually, still --brand is not showing at root.
Also, the CSS generated in <script type="text/css"> by angular-cli does not have --brand anywhere, it is actually compiling the CSS variable into #123123 so the output is:
h1 {
color: #123123;
}
Any ideas about how can I achieve changing a global color in runtime? Or how to get my CSS in :root and then how to get SASS to not compile it?
UPDATE
As #JonUleis has showed, there is no need for using css-var. Now the var --brand shows in the DOM at :root.
However, now color: var(--brand); line still does not show in the CSS, and h1 doesn't have a color style at all.
After updating node-sass to the latest 4.9.0 from 4.8.3, it worked great.
You're likely on an outdated version of node-sass that wasn't yet compatible with the syntax for CSS custom properties.
Here's your example code compiling successfully using Sassmeister without using the css-vars mixin:
I'm new to Neat/Bourbon and trying to setup using Codekit so that I can begin building some awesome grids!
I have installed Neat using the built in Codekit version by inserting #import "neat"; into my main SCSS file. It appears that this is working as I see a small snippet of code inserted into my CSS file, which I understand is the only CSS Neat inserts by default. This code is:
html {
box-sizing: border-box; }
*, *::after, *::before {
box-sizing: inherit; }
So, all appears to be importing correctly, however when trying to use any mixing form the Neat documentation I'm getting the following error from Codekit, hence preventing the compiler to complete:
Libsass: Error: no mixin named grid-column
Backtrace:
Users/petedungey/Desktop/Dropbox/Oak/Internal/Flywheel Local Sites/woocommerce-blueprint-site/app/public/wp-content/themes/oak_starter_theme/sass/layout/_grid.scss:14
on line 14 of Users/petedungey/Desktop/Dropbox/Oak/Internal/Flywheel Local Sites/woocommerce-blueprint-site/app/public/wp-content/themes/oak_starter_theme/sass/layout/_grid.scss
#include grid-column(3);
-----------^
Can anybody assist?
Looking through CodeKit’s Updates page, it seems that it still packages Neat 1.7.2. However, the grid-column mixin is from Neat 2.0.
You can view documentation for 1.7.2 here: http://neat.bourbon.io/docs/1.7.2/
I'm not sure whats happening. I'm new to Sass, so I was following this begginers guide: https://scotch.io/tutorials/getting-started-with-sass
For practicing (and hoping to use it as my developing tool) I set LiveReload to compile .scss files. But when testing the variable scope I got unexpected results.
In style.scss I have the following code:
$primaryColor: #eeccff;
body {
$primaryColor: #ccc;
background: $primaryColor;
}
p {
color: $primaryColor;
}
// When compiled, our paragraph selector's color is #eeccff
So p is supposed to get color: #eeccff. But this is what I'm getting:
body {
background: #cccccc; }
p {
color: #cccccc; }
I tested the same code in sassmeister.com and it worked as expected, just like the tutorial says:
body {
background: #ccc;
}
p {
color: #eeccff;
}
Again, I'm using LiveReload for Mac. And these are the compiling options:
Does anyone has an idea of why is this happening?
Thanks!
EDIT:
I found this question where someone was experiencing a very similar problem in a different situation: Web Essential for Visual Studio Sass compile wrong
Apparently it has to do with the Sass version you use. But how do I change that for LiveReload? How you change that?
Well, I just changed from Sass compiler. I had to stop using LiveReload and compile with Koala to have the expected results. Couldn't manage to change LiveReload Sass gem.
I used HTML auto-completion shortcut for the first time yesterday. I worked well. I tried to use the CSS autocompletion shortcut this morning and it did not work.
For example with :
#home {
display: ;
}
after typing "display:", and pressing alt+esc, I just get "--"
I am sure I am working in a CSS file. I took a look at the CSS bundle, but can't decipher the code.
Any idea ? Thanks.