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/
Related
We use webpack to compile some sass file into CSS hier is fragment of SASS file:
.#{$prefix}title {
color: $title-color;
}
Which is compiled into following CSS:
.x-titlebar .x-title {
color: #fff;
color: var(--base-foreground-color);
}
And we have some strange behavior in the components. Removing first rule with color constant - doesn't work too.
But if we remove the second color rule with variable - it works fine.
We've tested it with last Chrome 93.x and last Edge 93.x version - equal result.
We use sass-loader#10.2.0 & node-sass#6.0.1 newer version doesn't compatible with ExtReact 7.4.0
Is there any possibility to tell sass-loader do not put the rule with variable into compiled CSS?
Edited: I've found the main cause. The CSS are compiled by the sencha-fashion package.
In the project folder there is node_modules\#sencha\cmd\dist\js\node_modules\fashion\defaults.json file.
In the file is following section
"cssVars": {
"enable": true
}
After I've switched it to false - all variable rules disappears and it solves my problem. The file is part of node_modules #sencha\cmd and is called indirectly via #sencha/ext-webpack-plugin and will be lost if I clean and rebuild the project.
The question is now - how to configure this using #sencha/ext-webpack-plugin?
I am developing a WordPress theme and I am trying to use sass from another file using the #use method but it doesn't seem to be working. How can I fix the problem since the #import rule method will be depreciated soon?
I have files
//_brand.scss
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
and then
//footer.scsss
#use 'brand' as b;
.footer{
padding: 0px 5%;
background-color: b.$base-color;
}
and I get this error when it's compiling
Compilation Error
Error: Invalid CSS after "...ground-color: b": expected expression (e.g. 1px, bold), was ".$font-size;"
on line 5 of sass/opt/lampp/.../sass/footer.scss
>> background-color: b.$base-color;
I am using "Live Sass Compiler" visual studio code extension to compile to CSS
If you want to use the variables you have defined within the brand.scss file across different files, you can use the #import directive. For using it, just add the line below to your footer.scss file:
#import "brand";
Source: https://www.w3schools.com/sass/sass_import.asp
I hope my answer will help you
In my scss file I am importing a third-party css file
#import 'icons/third-party-icons/style';
Unfortunately, this style is missing the value for the color style
.mySelector {
content: "\eac2";
margin-left: -1em;
color: ;
}
As expected, node-sass is throwing the following error:
ModuleBuildError: Module build failed (from
./node_modules/sass-loader/lib/loader.js):
color: ;
^
Style declaration must contain a value
Is there any way to configure node-sass to ignore this invalid property?
In my opinion, that error report is there for a reason, you shouldn't have empty definitions as that is technically an error. In unminified CSS you wouldn't have an issue it would just appear as strikethrough in the element inspector in the browser, but in this case you break the minify process.
Instead of importing it you can download the CSS code if possible and save it in your project locally then solve the issues manually. It won't matter what you do later in your CSS file, the error will appear. Or else you can try to link the CSS in the header. If you are using PHP or similar serverside scripting then create a separate header.php (for example) and include it into every file. This way you will need to copy and paste the link once and you can access the style at every page.
You could override the imported css. The code is looking to use a value, but can't because it's null.
You could include in your style tags:
.mySelector {
color: black !important;
}
That !important will override whatever is imported from the stylesheet, and you class in the body will use that color instead of trying to use the null color.
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:
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.