I am trying to use a mixin with a custom function. But I have always receive the same error.
error sass/app.scss (Line 58 of sass/_grid.scss: Undefined mixin 'responsive-columns'.)
My function is :
#mixin responsive-columns($suffix:''){
#for $i from 1 through $columns{
.col#{$suffix}-#{$i}{
width : $i / $columns*100%;}
}
I found out what was the problem. I think it is a stupid one.
First I have to add :
#import "compass"
in my scss file.
Then in my terminal I have to use
compass watch instead of sass --watch sass_folder:css_folder
Related
Receiving an error while using a prefix on a variable imported using #use with a #forward, however using a prefix on a mixin works as expected.
Note: I've also tried to replace'-' with '_', '' and desperately removed the '$' which I figured would never work. No success.
This is written #forward "" as -*, and it adds the given
prefix to the beginning of every mixin, function, and variable name
forwarded by the module
- cite: https://sass-lang.com/documentation/at-rules/forward
Use case
_colors.scss
// Variable.
$primary-color-var: red;
// Mixin.
#mixin primary-color-mixin-example {
$primary-color: red;
}
_all-modules.scss
#forward './colors' as colors-*;
sample-component.scss
#use '../modules/all-modules' as foo;
.sample-component {
#include foo.colors-primary-color-mixin-example; // Works.
}
.sample-component {
color : foo.colors-$primary-color-var; // Throws an error.
}
Error message
Error: expected "(".
╷
6 │ color : colors.fonts-$primary-color-var;
│ ^
╵
src/sass/components/sample-component.scss 6:21 root stylesheet
Additional context
I would prefer not to use a mixin because I would like to assign the imported variable to a local variable, which doesn't seem to be possible when #including a mixin;
$local-primary-color: foo.colors-$primary-color-var;
main.scss
#import "sass1";
#import "sass2";
sass1.scss
$white-color: white
sass2.scss
.body{ color: $white-color}
If I just compile one time like this, it works fine
node-sass main.scss main.css
But if I use the watcher like this, modify and save _sass2.css gives me error
node-sass --watch main.css main.css
{
"status": 1,
"file": "sass2.scss",
"line": 3,
"column": 11,
"message": "Undefined variable: \"$whites\".",
"formatted": "Error: Undefined variable: \"$whites\".\n on line 3 of sass2.scss\n>> color:$whites;\n ----------^\n"
}
I have tried to use "sass" instead of "node-sass" and it works, is it a bug of node-sass?
Finally, I figured out the problem is the file name of the partials.
We should name files with underscore prefix if we do not want it to generate its own css code.
Then the solution is to change
sass2.scss
to
_sass2.scss
. (Also change sass1.scss to _sass1.scss although it is not the problem of the error)
How to use _mat-tabs-background() mixin availabel in angular material 2?
Here is my custom theme for MdTab
/* Import your custom input theme file so you can call the custom-input-theme function */
#import './components/header/header-links/app-header-links-component-theme.scss';
// Be sure that you only ever include this mixin once!
#include mat-core();
#include _mat-tabs-background(#ff0000);
Here is the error message...
ERROR in ./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/sass-loader/lib/loader.js?{"sourceMap":false,"preci
sion":8,"includePaths":[]}!./src/app/app.theme.scss
Module build failed:
undefined
^
Argument `$map` of `map-get($map, $key)` must be a map
Backtrace:
node_modules/#angular/material/_theming.scss:1107, in function `map-get`
node_modules/#angular/material/_theming.scss:1107, in function `mat-color`
node_modules/#angular/material/_theming.scss:3293, in mixin `-mat-tabs-background`
stdin:16
in D:\My_Projects\HZone_Web\Final Project\hardware-zone 1.1\node_modules\#angular\material\_theming.scss (line 1107, column 11)
Error:
undefined
^
Argument `$map` of `map-get($map, $key)` must be a map
You're NOT supposed to use private theming from the source code. Instead, use this:
styles.scss (Or whatever your filename is):
#include mat-tabs-theme($theme); // The theme
Then, you can use the backgroundColor input on md-tab (only available if you installed 2.0.0-beta.10 and above):
<md-tab-group>
<md-tab label="One" backgroundColor="primary"> <!-- Can be accent/ warn -->
Content here
</md-tab>
<md-tab label="Two" backgroundColor="accent"> <!-- Can be accent/ warn -->
Content here
</md-tab>
</md-tab-group>
Error:
Running "autoprefixer:dist" (autoprefixer) task
File .tmp/styles/documentation.css created.
Warning: Can't parse CSS: Missing property value at line 66:21 in .tmp/styles/main.css Use --force to continue.
Line 66 points to the following code:
Source:
span {
#extent .md-body-1;
}
p {
#extent .md-body-1;
}
I can't extent a tag in scss? Or is a autoprefixer issue?
you need to use #extend not #extent
My scss file is this:
#import "compass/typography/lists/bullets";
.view-content ul
+no-bullets
This gives me an error on the page:
Syntax error: Invalid css after " +no-bullets": expected "{", was ""
However, when the rule looks like this:
.view-content ul {
#include no-bullets;
}
then it's OK and bullets are gone.
But I like the shorthand notation, how to enable using it?
You're right, I found the related documentation.
I tried the following and it works.
Then, I tried your and it didn't work until I remove the trailing ; on the import instruction.
#import "compass/typography/lists/bullets"
.view-content ul
+no-bullets
The following works with Compass 0.12.2. Try removing the trailing ; on the import instruction.