How to use environment variables in SASS?
I have these SASS files inside my Framework:
Variables.scss
General.scss
Layout.scss
List.scss
Form.scss
Table.scss
All.scss
And inside All.scss, I've just included other files:
#import 'Variables';
#import 'General';
#import 'Layout'
#import 'List'
#import 'Form'
#import 'Table'
This exists in the Framework. In other projects A, B, and C, I want to be able to use this, and also override them if necessary. So, in project C for example, I have:
Variables.scss
List.scss
Form.scss
All.scss
As you see, only lists and forms need to be a little different, via colours and paddings and margins defined in Variables.scss.
The is how projects are on my physical disk:
D:\Company\Framework\WebUi\Styles\
D:\Company\ProjectA\Web\
D:\Company\ProjectB\Web\
D:\Company\ProjectC\Web\
...
Now I want to be able to reuse SASS files from Framework. Since these paths are only consistent across developers' machines from Company folder onwards, We have created an Environment Variable:
CompanyProjectsRoot => D:\Company
Now, I need to write something like this in All.scss of project C:
#import '%CompanyProjectsRoot\Framework\WebUi\Styles\All.scss';
#import 'Variables'
#import 'List'
#import 'Form'
But it doesn't work. Can I use Environment Variables in SASS files?
Related
This is my main.scss file.
// Main
// Variables (variables.scss)
#use "../../../style/variables" as *;
// Custom Normalize (normalize.scss)
#use "../../../style/normalize";
// Site header (header.scss)
#use "sections/header";
Variables defined in variables.scss are not accessible in normalize.scss & header.scss. Is there a way to use them inside those files without separate #use 'variables' statement?
Or would you just use separate #use method for each file? I am a newbie, so I don't know what's better.
You have two options.
1. #import
If you use #import except #use for imports, then you can access variables defined in variables.scss inside the normalize.scss & header.scss.
But it has a disadvantage. It is difficult to trace where your variables and mixins are coming from because #import enables an endless chain of imported files. It also allows for overlap and makes it difficult to trace back why your perfect css breaks. This is a problem especially with complex file structures and projects with multiple contributors and global libraries, which is why #import is no longer recommended by Sass.
2. #use
It also works like #import to break our stylesheet into smaller sections and load them inside other stylesheets. The key difference is how you access the original files' members. To do this you will need to refer to the namespace of the original file.
Here's an example of simple SCSS partials.
_variables.scss
$primary_color: #000;
_header.scss
#use 'variables';
.header {
color: variables.$primary_color
}
If you need more info read this article - https://www.liquidlight.co.uk/blog/use-and-import-rules-in-scss/
Let me know if you need further support.
At Bootstrap 5 docs they say:
Variable overrides must come after our functions, variables, and
mixins are imported, but before the rest of the imports.
But, at the same time, they provide two examples with variable overrides coming after only their functions, whereas their variables and mixins are imported later.
Here is a copy of the contradictory examples contained in the same document:
// Custom.scss
// Option B: Include parts of Bootstrap
// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
#import "../node_modules/bootstrap/scss/functions";
// 2. Include any default variable overrides here
// 3. Include remainder of required Bootstrap stylesheets
#import "../node_modules/bootstrap/scss/variables";
#import "../node_modules/bootstrap/scss/mixins";
// 4. Include any optional Bootstrap components as you like
#import "../node_modules/bootstrap/scss/root";
#import "../node_modules/bootstrap/scss/reboot";
#import "../node_modules/bootstrap/scss/type";
#import "../node_modules/bootstrap/scss/images";
#import "../node_modules/bootstrap/scss/containers";
#import "../node_modules/bootstrap/scss/grid";
// 5. Add additional custom code here
and
// Required
#import "../node_modules/bootstrap/scss/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Required
#import "../node_modules/bootstrap/scss/variables";
#import "../node_modules/bootstrap/scss/mixins";
// Bootstrap and its default variables
// Optional Bootstrap components here
#import "../node_modules/bootstrap/scss/root";
#import "../node_modules/bootstrap/scss/reboot";
#import "../node_modules/bootstrap/scss/type";
// etc
What would be the correct way?
The magic of Bootstrap is that all variables are declared as !default. (The library does, you shouldn't.)
Normally when you assign a value to a variable, if that variable already had a value, its old value is overwritten. But with Bootstrap, a Sass library, variables assigned by you will not overwritten if they were not declared !default.
See: https://sass-lang.com/documentation/variables#default-values
Generally speaking it does not really matter where you declare your variables as long as CSS is not generated yet - and if you've set variables, they will not be overridden.
Having said that - it's best practice to set yours after functions ... but before root and the other CSS generation SCSS.
The $utilities variable is the exception to that. If you declare a value to that you'll break the utilities/api CSS generation. Rather manipulate that map with the Utilities API (See https://getbootstrap.com/docs/5.0/utilities/api/) after you've also imported variables, mixins & utilities.
I suppose, looking at this with a different lens, the Bootstrap authors should be more consistent with their docs, or elaborate on inconsistencies - regardless, drop them an "issue" to let them know: https://github.com/twbs/bootstrap/issues
I agree that this is slightly misleading..
"Variable overrides must come after our functions, variables, and
mixins are imported, but before the rest of the imports."
This statement is true, if you're referencing any of the Bootstrap variables in your overrides. For example...
// Required
#import "../node_modules/bootstrap/scss/functions";
#import "../node_modules/bootstrap/scss/variables";
#import "../node_modules/bootstrap/scss/mixins";
// Variable overrides (referencing other Bootstrap vars)
$body-bg: $red;
$body-color: $gray-800;
// Optional Bootstrap components here
#import "../node_modules/bootstrap/scss/root";
#import "../node_modules/bootstrap/scss/reboot";
#import "../node_modules/bootstrap/scss/type";
// etc
overrides example referencing Bootstrap vars
But the example in the docs is correct (and works) because it's not referencing any Bootstrap variable in the overrides...
// Required
#import "../node_modules/bootstrap/scss/functions";
// Default variable overrides
$body-bg: #000;
$body-color: #111;
// Required
#import "../node_modules/bootstrap/scss/variables";
#import "../node_modules/bootstrap/scss/mixins";
// Bootstrap and its default variables
// Optional Bootstrap components here
#import "../node_modules/bootstrap/scss/root";
#import "../node_modules/bootstrap/scss/reboot";
#import "../node_modules/bootstrap/scss/type";
// etc
overrides example not referencing Bootstrap vars
Bootstrap 5 is still in Beta so the docs are still a WIP. Currently there are several open issues relating to variables (example). As far as the misleading phrase, I would wait for the release version since they're talking about separating base vars from the other vars.
I would like to know how can i extend default gap between columns in bulma, according official website is-8 gap equals 2em but i need 6em,can i override $column-gap value in my css file ?
This is a Sass variable, you can override it but not in a .css file, your need to setup Sass with node-sass or with Sass CLI or with webpack, you can also learn more about customisation with sass variables here.
All those links point to the official documentation and will help you with the setup. Then you will be able to overrride the value of the $column-gap and all other sass variables in a .scss file like this :
#charset "utf-8";
// Update all the variables you want :
$column-gap: 6em;
// And then import bulma
#import "../path/to/bulma";
// Or import only what you need from Bulma
#import "../path/to/bulma/sass/utilities/_all.sass";
#import "../path/to/bulma/sass/base/_all.sass";
#import "../path/to/bulma/sass/elements/container.sass";
#import "../path/to/bulma/sass/elements/title.sass";
#import "../path/to/bulma/sass/form/_all.sass";
#import "../path/to/bulma/sass/components/navbar.sass";
#import "../path/to/bulma/sass/layout/section.sass";
Technically this isn't a boostrap thing, it's a scss thing, but Bootstrap is the context of which I am having issues. I am changing the default value of some values in bootstrap. One particular variable, I want to reference another bootstrap variable.
So I have my own file:
#import "_variable.overrides.scss";
#import "bootstrap.scss";
my _variable.overrides.scss looks like this:
$secondary: lighten($primary, 10%);
I can't do that because $primary is undefined since I am importing my overrides scss first. If I import boostrap.scss first, it doesn't override, because overrides have to come before the default variable definition.
Is there any way to override one variable by referencing another variable?
Basically, this has been answered before here and here. You need to first #import any variables you want to reference in your custom SCSS..
Since $primary lives in _variables.scss, you need to #import _variables.scss and _functions.scss (since this is ref'd by _variables.scss):
#import "bootstrap/functions";
#import "bootstrap/variables";
Then, as explained in the docs, your custom vars will override Bootstrap's because all the Bootstrap variables use the !default flag, which means they won't take precedence over your custom vars which are imported before Bootstrap. So the entire SCSS would look like (you may need to edit the paths):
#import "bootstrap/functions";
#import "bootstrap/variables";
#import "_variable.overrides.scss";
#import "bootstrap.scss";
Is it possible to share variables between files, without importing my variables file in every file? Here's an example:
Variables.scss
$primary: #0000FF;
HelpPage.scss
#help-page-container {
background: $primary;
}
Core.scss
#import "Variables.scss";
#import "HelpPage.scss";
Core.scss is the only file that gets compiled. All my single-page files, common CSS classes, and Variables.scss is included in this file.
If I want to use $primary inside my HelpPage.scss file, I would need to either do:
#import "Variables.scss";
or
/// <reference path="Variables.scss" />
Either one works. However, if I have 20 pages, I would need to import/reference the variables file at the top of each and every one of them, just to make Visual Studio happy and not throw a
Undeclared variable
error at me.
Have you read this?
http://thesassway.com/beginner/how-to-structure-a-sass-project
Essentially you would import _variables.scss and _help-page.scss into core.scss
This way helppage partial has access to all variables.