I have a file _content-sidebar.scss at this location:
C:\Users\user\Downloads\livemath\sass\layout\_content-sidebar.scss
Which contains the following code:
#import "//variables-site/structure";
.content-area {
float: left;
margin: 0 (-$size__site-sidebar) 0 0;
width: $size__site-main;
}
And I have another file called _structure.scss at this location:
C:\Users\user\Downloads\livemath\sass\variables-site\_structure.scss
Which contains the following code:
$size__site-main: 960px;
$size__site-sidebar: 25%;
And when I'm trying to compile the scss file using the command line I'm getting this error:
Change detected to: sass/layout/_content-sidebar.scss
error sass/layout/_content-sidebar.scss (Line 5: Undefined variable: "$size__site-sidebar".)
You used double slashes for resources, that are not located at external locations:
C:\Users\user\Downloads\livemath\sass\layout\_content-sidebar.scss
and
C:\Users\user\Downloads\livemath\sass\variables-site\_structure.scss
You could write it with a dot #import "./variables-site/structure"; if it's in the root or maybe #import "../variables-site/structure"; to get into the other folder!
I tested the double slashes for internal resources in my project and it spitted out the same error (that the first occurrence of a variable is undefined)!
Normally it would state that the file couldn't be imported, but unfortunately this is not the case when using double slashes...
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;
I want to add a path prefix in an #import in my main theme.scss file but am getting the error Unexpected interpolation.
(I am using interpolation because the variable is in a string.)
$path-prefix: "../Scss/";
// No error on this
.test::before {
content: "#{$path-prefix}";
}
// But this produces and error
#import "#{$path-prefix}variables";
/* Sass Document */
$color_main: '#0671B2';
$color_secundary: '#019FAA';
a{color:$color_main}
Dreamweaver 2017 return this:
body:before { white-space: pre; font-family: monospace; content:
"Error: Invalid CSS after \"'#0671B2'\": expected expression (e.g.
1px, bold), was \";\"\A on line 3 of
D:\Servidores\EasyPHP-12.1\www\2016\Buzzon\BuzzonWeb\assets\css\style.sass\A
\A 1: /* Sass Document */\A 2: \A 3: $color_main: '#0671B2';\A 4:
$color_secundary: '#019FAA';\A 5: \A 6: a{color:$color_main}"; }
Ok I found the problem, the file extension of my file was .sass the correct is .scss and problem solved!
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.