How do I escape variable in url? Seems like this nor this variant do not work
#include image("R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=")
#mixin image($base64)
background: url(data:image/gif;base64,#{$base64}) //this is line N
//background: url("data:image/gif;base64,#{$base64}")
(Line N: Properties are only allowed within rules, directives, mixin
includes, or other properties.)
I tried sass 3.4.22 and 3.5.0-rc.1
The error message tells you that the background property needs to be wrapped by one of the named options.
#mixin image($base64)
background: url(data:image/gif;base64,#{$base64})
.class
#include image("R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=")
compiles to
.class {
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=);
}
with SassMeister and Sass v3.4.21. I had to change the order of the mixin definition and its usage to make the compilation work. I don't know if this is just a compiler thing, it might work the other way around for you.
Related
I want to start using #use instead of #import, since #import is going to be depreciated. I have a partial:
// _test.scss
$color1: #ee00ee;
referenced by:
// demo.scss
#use test;
html {
color: $color1;
}
If I comment out the html: $color1 line, I get no error. If I delete _test.scss I get a file not found error, so it seems the file is included.
But when everything is in place, I'm getting an undefined variable error. If I replace #use with #import, I get no error and the generated css has the expected color.
I'm on a Mac (big sur), using dart sass:
% dart --version
Dart SDK version: 2.9.3 (stable) (Tue Sep 8 11:21:00 2020 +0200) on "macos_x64"
The docs I've seen say that #use will replace #import, so I thought just changing to #use would be easy. Is there a step I'm missing?
It's a bit late, but as I understand it, #use treats the partial as modules, which more closely resembles the way JavaScript treats ES modules: In particular, the #use statement makes available a namespaced bit of external code, which changes the way you reference imported variables (and mixins and functions as well):
// demo.scss
#use test;
html {
color: test.$color1;
}
Some documentation is found in the article about #use on the SASS docs, and this article explains dart-sass' namespacing in some detail.
Im using Grunt SASS
https://github.com/sindresorhus/grunt-sass
Is it possible to convert my image paths to be absolute? So if I write this:
.something {
background: url(../icon.png);
}
I would like the compiled CSS to be:
.something {
background: url(www.mysite.com/images/icon.png);
}
This can be done with grunt css url replace:
https://www.npmjs.com/package/grunt-css-url-replace
However this isnt ideal. Running an additional task will be slower and I expect this will mess up my source maps. An add on / config setting for grunt sass would be better but I cant seem to find one.
Getting an error message when compiling my SCSS using the ruby compass gem.
run: /var/lib/gems/1.8/gems/compass-0.12.2/bin/compass compile
out: unchanged sass/partial/grid.scss
out: error sass/partial/catalog.scss (Line 5: Undefined variable: "$paragraphFont".)
out: create css/generated/partial/catalog.css
out: create css/generated/partial/base.css
out: overwrite css/generated/screen.css
My screen.scss imports partials like this:
#import "partial/base";
#import "partial/catalog";
In my base partial I have the $paragraphFont defined.
$paragraphFont: 'Lucida Sans', arial;
$regularFontSize: 14px;
And in catalog.scss I use it:
.product-view #price-block {
p {
font-weight: normal;
font-family: $paragraphFont;
....
}
}
Weird thing is that the css gets compiled just fine, and the $paragraphFont is populated correctly. So I don't know why the compiler is complaining at me about an error.
You're generating files that don't need to be generated.
screen.scss -> screen.css
base.scss -> base.css
catalog.scss -> catalog.css
The catalog file is being compiled on its own. Since it is not importing base.scss, the variables are not set. Your screen.scss file generates as you expect because it is importing all of the necessary information.
What you want to do is rename your partials to begin with an underscore to prevent them from being compiled on their own:
screen.scss -> screen.css
_base.scss (not compiled)
_catalog.scss (not compiled)
A simpler explanation that probably fits most of the users here:
You're compiling all your sass, when you only need to compile the top level file
sass is commonly modularised as follows:
toplevel.scss
include child1.scss
include child2.scss (that also uses variables from child1.sass but does not import child1.scss)
include child3.scss (that also uses variables from child1.sass but does not import child1.sass)
When compiling, you only need to compile toplevel.scss. Compiling other files on their own (eg, child2.scss) will generate errors about undefined variables.
In your gulpfile:
gulp.task('sass', function () {
gulp
.src('./static/scss/toplevel.scss') // NOT *.scss
.pipe(sass())
// Rest is just decoration
.pipe(prefixer('last 2 versions', 'ie 9'))
.pipe(gulp.dest('./static/css/dist'))
.pipe(livereload(livereloadServer));
});
In your compass log it states:
A) create css/generated/partial/catalog.css
B) create css/generated/partial/base.css
These need to be:
A) create css/generated/partial/base.css
B) create css/generated/partial/catalog.css
My guess is that your screen.scss has incorrect import statements.
I'd recommend looking into common Sass directory organizational structures. My personal favorite is The 7-1 Pattern.
The nature of it splits commonly used elements into other files, which are all imported by a main.scss to kill redundancies.
But also, firstly pay attention to #cimmanon's answer, as he more directly addresses your question.
Getting an error message when compiling my SCSS using the ruby compass gem.
run: /var/lib/gems/1.8/gems/compass-0.12.2/bin/compass compile
out: unchanged sass/partial/grid.scss
out: error sass/partial/catalog.scss (Line 5: Undefined variable: "$paragraphFont".)
out: create css/generated/partial/catalog.css
out: create css/generated/partial/base.css
out: overwrite css/generated/screen.css
My screen.scss imports partials like this:
#import "partial/base";
#import "partial/catalog";
In my base partial I have the $paragraphFont defined.
$paragraphFont: 'Lucida Sans', arial;
$regularFontSize: 14px;
And in catalog.scss I use it:
.product-view #price-block {
p {
font-weight: normal;
font-family: $paragraphFont;
....
}
}
Weird thing is that the css gets compiled just fine, and the $paragraphFont is populated correctly. So I don't know why the compiler is complaining at me about an error.
You're generating files that don't need to be generated.
screen.scss -> screen.css
base.scss -> base.css
catalog.scss -> catalog.css
The catalog file is being compiled on its own. Since it is not importing base.scss, the variables are not set. Your screen.scss file generates as you expect because it is importing all of the necessary information.
What you want to do is rename your partials to begin with an underscore to prevent them from being compiled on their own:
screen.scss -> screen.css
_base.scss (not compiled)
_catalog.scss (not compiled)
A simpler explanation that probably fits most of the users here:
You're compiling all your sass, when you only need to compile the top level file
sass is commonly modularised as follows:
toplevel.scss
include child1.scss
include child2.scss (that also uses variables from child1.sass but does not import child1.scss)
include child3.scss (that also uses variables from child1.sass but does not import child1.sass)
When compiling, you only need to compile toplevel.scss. Compiling other files on their own (eg, child2.scss) will generate errors about undefined variables.
In your gulpfile:
gulp.task('sass', function () {
gulp
.src('./static/scss/toplevel.scss') // NOT *.scss
.pipe(sass())
// Rest is just decoration
.pipe(prefixer('last 2 versions', 'ie 9'))
.pipe(gulp.dest('./static/css/dist'))
.pipe(livereload(livereloadServer));
});
In your compass log it states:
A) create css/generated/partial/catalog.css
B) create css/generated/partial/base.css
These need to be:
A) create css/generated/partial/base.css
B) create css/generated/partial/catalog.css
My guess is that your screen.scss has incorrect import statements.
I'd recommend looking into common Sass directory organizational structures. My personal favorite is The 7-1 Pattern.
The nature of it splits commonly used elements into other files, which are all imported by a main.scss to kill redundancies.
But also, firstly pay attention to #cimmanon's answer, as he more directly addresses your question.
I'm using Compass 0.12.2 which uses this code for its border-radius mixin:
https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_border-radius.scss
As easy to see, the default value for the argument $radius is set with the variable $default-border-radius which is defined at top of the file.
Then why does this
#include border-radius; // or #include border-radius();
throw the error Mixin border-radius is missing argument $radius ?
Shouldn't it use the default value?
In my case this was caused by bootstrap-sass defining its own border-radius mixin, which was overriding the compass one.