This question already has answers here:
#import in #if statement in Sass
(6 answers)
Closed 7 years ago.
I'm trying to import a set of files using breakpoint-sass but am getting an error
filenames.scss (Line 99: Import directives may not be used within control directives or mixins.)
The code im using is:
#include breakpoint($breakpoint2) {
#import "path/to/sassfilename";
}
Is this even allowed? Can I import files in breakpoint? I couldn't see anything documentation to say otherwise so I'm assuming it is possible to import files instead of inlining all the css.
You can not use import into include mixin. This is your error.
You have to move the import line outside conditionals or directives.
Maybe you can create a file named _breakpoint.scss and, inside it, place your code:
//filenames.scss
#import "breakpoint";
//some imported files
//_breakpoint.scss
#import 'path/to/sassfilename';
Regards.
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.
With the latest version of SASS/SCSS, is it possible to setup variables for the #import action like so...
$mpath: "~/../../../node_modules/";
#import {$mpath}+"bootstrap/scss/bootstrap";
The above is syntax is obviously wrong on #import, but hopefully you get the point ;) Can we do this?
The correct way to do interpolate a variable is like this:
$mpath: "~/../../../node_modules/";
#import "#{$mpath}bootstrap/scss/bootstrap";
This would insert the value of the variable in the path and import the Sass file.
I try to make different config files (for different colors) and use the variables in another file I import basic.scss, Im going to make multiple app.scss files like app1.scss and app2.scss which use different config files with different colors.
My config1.scss
$primary-color : #6a7dcc;
$primary-font-color: #ccc;
my basic.scss
body {
background-color: $primary-color;
color: $primary-font-color;
}
my app1.scss
#import "config2.scss";
#import "basic.scss";
This gives me the error:
Error: Undefined variable: "$primary-color". on line 2 of
app/css/basic.sc
How can I use imported variables in other imported files?
Try changing it to:
#import "_config2";
#import "_basic";
File Config1.scss is having variable $primary-color and your are importing config2.scss (which is not having variable $primary-color) in your app1.scss, i think that is the reason
Looks like you have a config1 and config2. Unless that is a typo, once you change your #import config2.scss to #import config1.scss it should work.
Tl;dr you arent importing the file where the variables were declared. Do that and it should work.
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 fairly new to Compass, but I have been trying to use Compass in a project to generate my icon sprites. See this tutorial:
http://beta.compass-style.org/help/tutorials/spriting/
IMO, the tutorial isn't exactly clear. To start, the tutorial never tells you to create the "_icons.scss" file that contains the "all-icon-sprites" mixin.
#import "icon/*.png";
#include all-icon-sprites;
The result of this is an error:
"Syntax error: Undefined mixin 'all-icon-sprites'."
So I added the "_icons.scss" file to my project, and changed the code to:
#import "icon/*.png";
#import "_icons";
#include all-icon-sprites;
Now, I get this error:
Syntax error: Invalid CSS after " $delete-position": expected ")", was ": $icon-delete-..."
on line 28 of /path/to/_icons.scss
Can anyone explain to me what I'm doing wrong? Or is the problem actually with the "_icons.scss" file?
The tutorial doesn't tell you to import the _icons.scss, because it is not required. You either import the png files or the generated file -- not both. They are the same, except if you import the png files, you end up importing a generated stylesheet that is kept up to date automatically as the png files change (renames, added, removed, etc).
do you have any png files in the <images>/icon directory?
To be honest, this error is one I would expect to see if the compass version that is processing the stylesheet isn't the one you're using on the command line. Are you compiling with rails or the CLI?