Following the B5 new documentation, this is how you are supposed to add new utilities with the new utilities API. I have not been the get the new output though.
exemple:
#import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"cursor": (
property: cursor,
class: cursor
responsive: true,
values: auto pointer grab,
)
)
);
my file:
#import "bootstrap.scss";
#import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"button-rounded": (
property: border-radius,
class: button-rounded,
values: (
null: 20px,
),
),
)
);
I need to import bootstrap.scss because $utilities is undefined otherwise
the goal is to add a new property to make the button rounded.simple example to test out the new API. not working though
I am using the https://github.com/twbs/bootstrap-npm-starter to compile the scss files:
the src is starter.scss and the output is starter.css
I cannot find the new property button-rounded
When making Bootstrap SASS customizations, the #import "bootstrap" should go after the changes. Also, the utilities file requires the variables file, and the variables file requires the functions file, so you must import all 3 before the change...
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"button-rounded": (
property: border-radius,
class: button-rounded,
values: (
null: 20px,
),
),
)
);
#import "bootstrap";
Demo
Since Bootstrap 5 is currently beta, I've submitted an issue report for this.
Bootstrap 5.0.1, somehow no luck with map-merge($utilities ...)
but bootstrap has one more extension point: by overriding every $var default value
following will merge inside #import '~bootstrap/scss/utilities';
$utilities: (
'event-type': (
property: background-color,
class: 'event-type', // <- somehow this required
values: (
commit: #BADA55,
issue: #C0FFEE,
),
),
);
#import '~bootstrap/scss/functions';
#import '~bootstrap/scss/variables';
#import '~bootstrap/scss/mixins';
#import '~bootstrap/scss/utilities';
#import '~bootstrap/scss/utilities/api';
Since Bootstrap 5.2. update you need to proceed a little different. There is new maps file added.
If you are working with SCSS and you would like to modify colors you should add maps to your SCSS file.
#import "../../node_modules/bootstrap/scss/functions";
#import "../../node_modules/bootstrap/scss/variables";
#import "../../node_modules/bootstrap/scss/maps"; // MAPS FILE - SINCE 5.2
and then:
$custom-colors: (
"white": $white, // your colours
);
$theme-colors: map-merge($theme-colors, $custom-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");
and finally:
#import "../../node_modules/bootstrap/scss/mixins";
#import "../../node_modules/bootstrap/scss/utilities";
and the rest.
As of Bootstrap 5.0.1 this would be more appropriate:
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/utilities";
#import "bootstrap/scss/helpers";
#import "bootstrap/scss/utilities/api";
$utilities: map-merge(
$utilities,
(
"button-rounded": (
property: border-radius,
class: button-rounded,
values: (
null: 20px,
),
),
)
);
Importing "bootstrap" at the end is not required anymore.
For bootstrap 5.1.3 from documentation
Don't forget #import "bootstrap/scss/maps"; as it's needed by utilities.
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/mixins";
#import "bootstrap/scss/maps";
#import "bootstrap/scss/utilities";
$utilities: map-merge(
$utilities,
(
"button-rounded": (
property: border-radius,
class: button-rounded,
values: (
null: 20px,
),
),
)
);
#import "bootstrap/scss/utilities/api";
So basically, I'm trying to modify the button-variant mixin in bootstrap 4. The core file where the code for this resides is bootstrap\scss\mixins, and the filename is _buttons.scss. In my custom.scss, I have the following code:
#import "../../node_modules/bootstrap/scss/bootstrap";
I would want to keep the mixin name the same and not override it using a different name because it's being used in the file node_modules\bootstrap\scss_buttons.scss in the following code that generates all buttons based on the colors available:
#each $color, $value in $theme-colors {
.btn-#{$color} {
#include button-variant($value, $value);
}
}
What happens is that when the new modified mixin code is added below importing bootstrap in custom.scss, it does not have any effect as the imported bootstrap gets compiled after that code and the default button css gets compiled. Whereas, when the modified mixin code is added after importing bootstrap in custom.scss, there is duplication of buttons in the compiled .css file.
How would one go about modifying the code in a mixin without editing the core bootstrap files?
You should import Bootstrap's SCSS files separately instead of the whole pack, and you should import your own mixins after Bootstrap's _mixins.scss. This way you can override them before Bootstrap's _buttons.scss would use them:
#import "bootstrap/scss/functions";
#import "bootstrap/scss/variables";
#import "bootstrap/scss/mixins";
#import "my-custom-mixins";
// rest of Bootstrap imports (see bootstrap.scss):
#import "bootstrap/scss/root";
#import "bootstrap/scss/reboot";
#import "bootstrap/scss/type";
#import "bootstrap/scss/images";
#import "bootstrap/scss/code";
#import "bootstrap/scss/grid";
#import "bootstrap/scss/tables";
#import "bootstrap/scss/forms";
#import "bootstrap/scss/buttons";
#import "my-custom-buttons";
#import "bootstrap/scss/transitions";
#import "bootstrap/scss/dropdown";
#import "bootstrap/scss/button-group";
#import "bootstrap/scss/input-group";
#import "bootstrap/scss/custom-forms";
#import "bootstrap/scss/nav";
#import "bootstrap/scss/navbar";
#import "bootstrap/scss/card";
#import "bootstrap/scss/breadcrumb";
#import "bootstrap/scss/pagination";
#import "bootstrap/scss/badge";
#import "bootstrap/scss/jumbotron";
#import "bootstrap/scss/alert";
#import "bootstrap/scss/progress";
#import "bootstrap/scss/media";
#import "bootstrap/scss/list-group";
#import "bootstrap/scss/close";
#import "bootstrap/scss/toasts";
#import "bootstrap/scss/modal";
#import "bootstrap/scss/tooltip";
#import "bootstrap/scss/popover";
#import "bootstrap/scss/carousel";
#import "bootstrap/scss/spinners";
#import "bootstrap/scss/utilities";
#import "bootstrap/scss/print";
I am using the bootstrap 4 framework for my project.
I'm theming by overriding core variables. If I adjust my grid variables, they work, but if I try and update the $border-radius-lg var, no changes happen, and the default $border-radius-lg size is still being used.
This is where custom variables are placed...
#import "scss/functions";
#import "scss/variables";
// my custom variables
#import "myvars";
#import "scss/mixins";
#import "scss/root";
#import "scss/reboot";
#import "scss/type";
#import "scss/images";
#import "scss/code";
#import "scss/grid";
#import "scss/tables";
#import "scss/forms";
#import "scss/buttons";
#import "scss/transitions";
#import "scss/dropdown";
#import "scss/button-group";
#import "scss/input-group";
#import "scss/custom-forms";
#import "scss/nav";
#import "scss/navbar";
#import "scss/card";
#import "scss/breadcrumb";
#import "scss/pagination";
#import "scss/badge";
#import "scss/jumbotron";
#import "scss/alert";
#import "scss/progress";
#import "scss/media";
#import "scss/list-group";
#import "scss/close";
#import "scss/toasts";
#import "scss/modal";
#import "scss/tooltip";
#import "scss/popover";
#import "scss/carousel";
#import "scss/spinners";
#import "scss/utilities";
#import "scss/print";
These are my custom vars in myvars file
/* my custom bootstrap 4 vars
-------------------------------------------------- */
// these work fine when I make changes to test
$grid-columns: 12;
$grid-gutter-width: 30px;
// this doesn't change any of my large input radius
$border-radius-lg: 1rem;
I checked the bootstrap variables file and $border-radius-lg is the parent variable of $input-border-radius-lg but after my css is compiled the radius is still the default size .3rem
Does anyone know how to get the this working?
Here is a screenshot of the default vars...
You should import variables after the changes to override. Also, since you're directly setting the variable values (and not assigning customizations from any existing variables), you don't need to import functions and variables first.
// my custom variables
#import "myvars";
#import "scss/functions";
#import "scss/variables";
#import "scss/mixins";
#import "scss/root";
#import "scss/reboot";
#import "scss/type";
#import "scss/images";
#import "scss/code";
#import "scss/grid";
#import "scss/tables";
#import "scss/forms";
#import "scss/buttons";
#import "scss/transitions";
#import "scss/dropdown";
#import "scss/button-group";
#import "scss/input-group";
#import "scss/custom-forms";
#import "scss/nav";
#import "scss/navbar";
#import "scss/card";
#import "scss/breadcrumb";
#import "scss/pagination";
#import "scss/badge";
#import "scss/jumbotron";
#import "scss/alert";
#import "scss/progress";
#import "scss/media";
#import "scss/list-group";
#import "scss/close";
#import "scss/toasts";
#import "scss/modal";
#import "scss/tooltip";
#import "scss/popover";
#import "scss/carousel";
#import "scss/spinners";
#import "scss/utilities";
#import "scss/print";
Demo: https://www.codeply.com/go/2hEAbv49oQ
Related: How to extend/modify (customize) Bootstrap 4 with SASS
I've installed bourbon into an empty style sheet and compiled it and I'm getting errors in Bourbon.
Bourbon 5.0.0.alpha.0
Sass 3.4.18
Cutting out these parts of Bourbon and it'll work.
// Bourbon 5.0.0.alpha.0
// http://bourbon.io
// Copyright 2011-2015 thoughtbot, inc.
// MIT License
#import "bourbon/settings/asset-pipeline";
#import "bourbon/settings/global-font-file-formats";
#import "bourbon/settings/scales";
#import "bourbon/settings/modular-scale";
#import "bourbon/functions/assign-inputs";
#import "bourbon/functions/contains";
#import "bourbon/functions/contains-falsy";
#import "bourbon/functions/is-length";
#import "bourbon/functions/is-light";
#import "bourbon/functions/is-number";
#import "bourbon/functions/is-size";
#import "bourbon/functions/shade";
#import "bourbon/functions/strip-unit";
#import "bourbon/functions/tint";
#import "bourbon/functions/unpack";
#import "bourbon/functions/modular-scale";
#import "bourbon/helpers/directional-values";
// #import "bourbon/helpers/font-source-declaration";
#import "bourbon/css3/font-face";
#import "bourbon/addons/border-color";
#import "bourbon/addons/border-radius";
#import "bourbon/addons/border-style";
#import "bourbon/addons/border-width";
//#import "bourbon/addons/buttons";
#import "bourbon/addons/clearfix";
#import "bourbon/addons/contrast-switch";
#import "bourbon/addons/ellipsis";
#import "bourbon/addons/font-stacks";
#import "bourbon/addons/hide-text";
#import "bourbon/addons/margin";
#import "bourbon/addons/padding";
//#import "bourbon/addons/position";
#import "bourbon/addons/prefixer";
#import "bourbon/addons/size";
//#import "bourbon/addons/text-inputs";
#import "bourbon/addons/timing-functions";
#import "bourbon/addons/word-wrap";
#import "bourbon/bourbon-deprecated";
The error when include all of the stylesheets above:
error style.scss (Line 22 of _font-source-declaration.scss: Invalid CSS after " eot": expected ")", was ": "#{$file-pa...")
My issue was from compiling my sass with the Scout app. Apparently Scout is no longer maintained and uses an old version of sass. I've since changed to use Koala and my issues are resolved.
I have a class that extend .button and .tiny from Foundation 5 Framework.
index.scss
#import '_core/styles/compass';
#import '_core/styles/foundation';
#import '_core/styles/fonts';
#import '_core/styles/colors';
#import '../common/modules/components/components';
#import '_core/components/components';
#import '_core/styles/common';
#import '_core/styles/views';
_foundation.scss
#import '../../../common/lib/foundation/scss/foundation/components/global';
#import '../../../common/lib/foundation/scss/foundation/components/type';
#import '../../../common/lib/foundation/scss/foundation/components/block-grid';
#import '../../../common/lib/foundation/scss/foundation/components/buttons';
#import '../../../common/lib/foundation/scss/foundation/components/forms';
#import '../../../common/lib/foundation/scss/foundation/components/labels';
#import '../../../common/lib/foundation/scss/foundation/components/pagination';
#import '../../../common/lib/foundation/scss/foundation/components/tables';
#import '../../../common/lib/foundation/scss/foundation/components/grid';
#import '../../../common/lib/foundation/scss/foundation/components/top-bar';
#import '../../../common/lib/foundation/scss/foundation/components/alert-boxes';
#import '../../../common/lib/foundation/scss/foundation/components/visibility';
#import '../../../common/lib/foundation/scss/foundation/components/reveal'
_components.scss
.action{
#extend .tiny;
background-color: pink;
}
With compass 0.12.5 everything works perfectly fine. But if i upgrade my version to 1.0.1 compass telling me that the extend can't be applied because the .tiny selector does not exists.
I've read the changelog of compass and nothing seems to mention that there is a breaking change about extends or imports.