I'm using different 'SCSS variables files' (bootstrap variables, company variables, project variables) so it's easy to re-use them in other projects. But it seems I can't use variables across files.
Example:
In company-variables.scss I declared $white: #fff;
In project-variables.scss I want to reuse the above variable like this $body-color: darken($white, 20%);
I get the following error: Undefined variables: "$white". $body-color: darken($white, 20%);
I load my files like this:
#import "bootstrap-variables";
#import "company-variables";
#import "project-variables";
Paths are correct.
I'm pretty new to SCSS. Any idea what I'm doing wrong or is this not possible/not the way to go?
If you want to use it , you should import #import "company-variables"; into #import "project-variables";
Or just use default white color from bootstrap like that:
darken(theme-color("white"), 20%);
Related
I'm trying to change some variables for my custom version of Bootstrap. Right now I have the Bootstrap SCSS files and my own variables file. My file looks like this:
#import "/path/to/bootstrap";
$blue: #42a5f5;
$indigo: #5c6bc0;
more styles here…
However, when I run sass /path/to/custom.scss /path/to/output.css, it still outputs the default Bootstrap files like this:
:root {
--blue: #007bff;
--indigo: #6610f2;
more styles here…
Why does this happen?
According to Bootstrap 4:
Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap’s Sass files.
Since you create your own custom.scss file, it should look like this:
// Your variable overrides
$blue: #42a5f5;
$indigo: #5c6bc0;
// Bootstrap and its default variables
#import "/path/to/bootstrap";
I'm trying to add an option to change the site colour. So, I have a color field which is working fine but the problem is I need to change the colour to 10% darker when the mouse is hover. The function darken says the first argument must be a color.
Error: argument `$color` of `darken($color, $amount)` must be a color
My code is the following:
:root {
--main-colour: #f06d06;
}
$colour-primary: var(--main-colour);
.btn {
background-color: $colour-primary;
&:hover {
background-color: darken($colour-primary, 10%);
}
}
I need the variable --main-colour because this will be used to change the colour in real time.
Any ideas?
Many thanks
var(--main-colour) is an CSS function that is interpolated at runtime (so it will be resolved AFTER the compilation of SCSS).
SCSS is compiled, therefore all its functions are calculated before and doesnt change run-time.
The problem in your code happens because darken function requires a valid color to perform calculations on, and during compilation time all it gets is var(--main-colour) and not the color itself. (darken is an SCSS function, and not a CSS function, so it cannot be changed runtime).
That problem comes from Bootstrap.
If you are working with a framework like React or angular, remember to import the function before the variables.
#import 'functions';
#import 'variables';
As already answered, not possible. However, in some cases filter: brightness(90%); could be a workaround. More on CSS filters here.
In new version You have to import bootstrap variables. if Still error check file patch, it solves after importing bootstrap variables , I was not importing bootstrap variables ,...
#import "~bootstrap/scss/functions";
#import '~bootstrap/scss/variables';
You need to import the 3 files
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/variables";
#import "../node_modules/bootstrap/scss/mixins";
I have a simple gulp build to compile my .scss files:
gulpfile.js:
gulp.task('sass', function() {
return gulp.src('app/assets/scss/**/*.scss')
.pipe(gulp.dest('app/assets/css'))
});
...
index.scss:
$brand-primary: #b0b0b0;
// $brand-primary: #b1b1b1;
// $brand-primary: #b2b2b2;
...
In index.scss I have multiple versions of the $brand-primary variable I want the file to compile with, e.g. I want gulpfile.js to automatically create multiple versions of index.scss depending on the $brand-primary variable: index-1.css, index-2.css, index-3.css, etc. with the $brand-primary value equal to #b0b0b0 first, then #b1b1b1, then #b2b2b2 accordingly.
The idea is to create multiple color options for my template without manually recompiling it for each color.
PS: I am aware of CSS variables, however those won't work with color function like darken($brand-primary, 10%);
It would be very hard to do what you ask purely programatically. I'm not even sure it's possible.
Why don't you just create 3 index.scss files each with different $brand-color and and then import everything else in them. Or even better make another file which will import all of your other *.scss files and then just import that file and color in each index file. So your index files would look like this:
$brand-primary: #b0b0b0;
#import 'style';
and _style.scss would have all of your other scss dependencies.
I've inherited a project with a ton of CSS and been assigned the task of modifying it so the color palette can easily be changed.
I've immediately thought of using a CSS preprocessor, tried less and easily switched the colors for variables, so I just have to define a base color and can switch the color theme.
The problem is, every time I switch the color theme I have to either overwrite colors.less with the new color settings or modify the colors.less import in a ton of files.
What I want is to end up with a single file with a lot of imports (basically one per component or set of components), and on that file when I import colors-red.less instead of colors-blue.less all the components imported right after use the red palette so the theme compiled is red instead of blue, for example.
The problem I am having is that the component files do not get the "globals" with the color definitions so I can't compile the base file that imports those files.
I've read there is the possibility of using "partials" (files starting with _ that won't get compiled independently but imported and then compiled), but my compiler seems to be ignoring this feature, and the eclipse plugin I use for editing and verifying less files also complains about the color variables not being defined on those partials.
How can I can get the partials to work? Is there a better approach to do this task?
Stil, they won't be defined on the imported files, just on the main file, so >compilation will break on the imported files. You see what I mean?
Nope? example:
mixins.less:
.mixin()
{
color: #color;
}
variables.less:
#color: orange;
project.less:
#import "mixins";
#import "variables";
p {
.mixin();
}
Now running lessc project.less outputs:
p {
color:orange;
}
Now i change to content of project.less as follows:
#import "mixins";
#import "variables";
p {
.mixin();
}
#color: red;
Then running lessc project.less outputs:
p {
color:red;
}
I am working on a project that involves different themes for each subpage. Each subpage has the exact same HTML markup as a frame, but on every subpage, the same elements - such as headings - must have different colors.
The way I am tackling this problem is to have every single declaration that differs on subpages in their corresponding CSS files, such as red.css or blue.css. These files contain only the color declarations of the selectors that must be different, so font-sizes and everything else is in the global CSS file.
What I am hoping to accomplish is to have the color variables declared in a file and create a SCSS frame for the theme CSS files that include the corresponding variables for the CSS declarations. In a more clear way:
Example of the variable declarations:
$red: red;
$blue: blue;
And the theme frame SCSS file should look something like this:
h1 {
color: $heading-color;
}
And the goal is to make SASS loop through the variables and create an X number of different CSS files that have the same frame, but each of them should have their corresponding values at the right places, so blue.css should have the blue values, red should have the red values, etc.
Is this possible to do? What I'm trying to avoid is to make X SCSS files with the exact frame in it, but with different values for their values, as this means X number of editing every time something changes.
With SASS you can import files which contain common CSS rules. Just create 2 files, each with different variables definition and include everything other from another scss file. Like this:
theme1.scss:
$primaryColor: red;
$secondaryColor: blue;
#import 'all';
theme2.scss:
$primaryColor: orange;
$secondaryColor: violet;
#import 'all';
_all.scss
/*All your CSS rules including for example:*/
h1 {
color: $primaryColor;
}
SASS will compile into 2 files theme1.css and theme2.css but there is no need to write duplicate CSS.