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";
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 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...
I found a solution on how to resize column
.col5-unit {
#include grid-column(2.4); // (12/5 = 2.4)
}
However, I'm getting this error
[16:17:17] Starting 'styles'...
[16:17:17] gulp-inject 4 files into index.scss.
[16:17:17] [Sass] Error in plugin 'gulp-sass'
Message:
no mixin named grid-column
Backtrace:
src/app/main/main.scss:110
Details:
fileName: /home/ubuntu/testapp/src/app/main/main.scss
lineNumber: 110
[16:17:17] Finished 'styles' after 35 ms
I saw grid-column in the file grid.scss but I'm not sure where to properly put my scss code.
As #akarienta's request, here is how I got it working. Without the inclusion of this import code, it won't get fixed.
#import "bower_components/foundation/scss/foundation/components/tabs";
I added that line to my own _settings.scss
then I put the code below to another scss file. It should have worked in main.scss but wondering why I didn't. I'll have to retest. Anyways, everything is working great
.col5-unit {
#include grid-column(2.4); // (12/5 = 2.4)
}
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
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.