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.
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.
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.
Im doing my web in Middleman (static Ruby web generator)
I have Foundation installed and working. Then in my styleshhets folder I have a _settings file where I should override foundation's settings.
But somehow it is not working...
My structure is this:
web
source
bower_components
foundation
components
_settings.scss
...
images
javascript
layouts
stylesheets
...
_settings.scss
...
Then In the _settings.scss on the stlesheets folder I want to override for example the body font color to red like this:
// We use these to control various global styles
// $body-bg: $white;
$body-font-color: red;
But is taking no effect.
Config.rb:
# Change Compass configuration
compass_config do |config|
config.output_style = :compact
config.add_import_path "bower_components/foundation/scss"
config.http_path = "/"
config.css_dir = "stylesheets"
config.sass_dir = "stylesheets"
config.images_dir = "images"
config.javascripts_dir = "javascripts"
end
after_configuration do
#bower_config = JSON.parse(IO.read("#{root}/.bowerrc"))
sprockets.append_path File.join "#{root}", #bower_config["directory"]
end
Any ideas what i need to do to be able to override foundations styles via my _settings.scss on my stylesheets folder ?
Here is my web on github if you need to see the whole structure :
https://github.com/GiorgioMartini/Giorgio-Web
As long as _settings.scss is imported BEFORE foundation.scss it should work.
Your config.rb is correct. However, one thing to pay attention to is the line
#import 'foundation';
which will be treated differently than the line
#import 'foundation.scss';
Compass will first look to see if there is a foundation.scss file in the bower_components/foundation path. Since there is, it will use that one. Further, since all SASS variables have already resolved in foundation.css, importing _settings.scss beforehand will not change the default styles. Instead, make sure the top of your app.scss file looks like this:
#import 'foundation.scss';
#import 'settings';
Because bower_components/foundation/_settings.scss is fully commented out by default, it won't disrupt the new styles.
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.
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?