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";
Related
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.
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";
I'm using the Susy SASS-library. I'm compiling one main SASS-file that #imports various partial SASS-files. Inside the partials I use Susy-mixins. Do I need to #import "Susy" for every single partial SASS-file? What's the smart way to do this?
You can just have a single #import "Susy" before you import all of your other partials. As long as your main file imports Susy first, your partials will be able access it.
#import "Susy";
#import "partials/header";
#import "partials/footer";
We need to put #import at the end of my CSS file. For example:
SCSS:
#import "reset.css";
Body {
font: 0.8em arial;
}
#import "customation.css"
compile to:
#import "reset.css";body{font: 0.8em arial;}#import "customation.css"
but after compile it changed the #import order and CSS file will be this:
#import "reset.css";#import "customation.css";body{font: 0.8em arial;}
It's very important for us to keep #importing the custom.css file at the end for our customization. We can't put the #import to CSS file manually because SCSS file will be changed and CSS file will be rewritten.
Any suggestion?
You can't. Sass is smart enough to know that #import declarations must be at the beginning of the file so it rewrites it for you to be valid.
The #import CSS at-rule allows to import style rules from other style sheets. These rules must precede all other types of rules, except #charset rules; as it is not a nested statement, it cannot be used inside conditional group at-rules.
https://developer.mozilla.org/en-US/docs/Web/CSS/#import
If this is not acceptable, you'll need to use multiple link declarations (which are arguably better anyway for the user).
Are you using #import for any particular reason? There are performance impacts, and no major use case anymore.
It would be better if you used Sass's #import to concatenate the file instead, this would also allow you to import in the order you want and rely on the cascade.
#import "reset";
Body {
font: 0.8em arial;
}
#import "customation";
im new to sass and having some trouble with imports. These are my imports
#import "reset";
#import "variables";
#import "fonts";
#import "mixins";
#import "grid";
#import "foundations";
#import "forms";
and these are the name of my documents reset.scss, variables.scss, fonts.scss, mixins.scss, grid.scss, foundations.scss, forms.scss.
Any idea why they are not importing?
Thanks
The name of the documents inside the Main sass file must match the names of the files you are trying to import, otherwise it will not work.
Something that you may want to look into is SMACSS it will help you structure your document and avoid Nested craziness!
See "Partials" here: http://sass-lang.com/guide
I see you're using Foundation, so definitely also read this regarding partials for it: http://zurb.com/university/lessons/35