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.
Related
I want to change Bootstrap-vue theme colors , primary , success , danger ...
I have read document but still can't do that
this is theme.scss
$body-bg: red;
$body-color: #111;
$theme-colors: (
"primary": red,
"danger": #caaf12
);
$primary:red;
#import '../node_modules/bootstrap/scss/bootstrap';
#import '../node_modules/bootstrap-vue/src/index.scss';
and I have imported this file in my main.scss like this
#import url('./theme.scss');
body{
...
}
But still primary color does not change
How can I fix this ?
I found answer .
I have to add theme.scss in nuxt-config like this
css:['./assets/theme.scss']
also ichanged import address like this
#import 'node_modules/bootstrap/scss/bootstrap';
#import 'node_modules/bootstrap-vue/src/index.scss';
I moved my utilities map merge code around the file in every place I could think of and it still doesn't work. Tried putting the bootstrap import in at the end since people say that should help and it still doesn't work. Any suggestions would be appreciated.
// Configuration
#import "../../../bootstrap-5/scss/functions";
#import "../../../bootstrap-5/scss/variables";
#import "../../../bootstrap-5/scss/maps";
#import "../../../bootstrap-5/scss/mixins";
#import "../../../bootstrap-5/scss/utilities";
// Layout & components
#import "../../../bootstrap-5/scss/root";
#import "../../../bootstrap-5/scss/reboot";
#import "../../../bootstrap-5/scss/type";
#import "../../../bootstrap-5/scss/images";
#import "../../../bootstrap-5/scss/containers";
#import "../../../bootstrap-5/scss/grid";
#import "../../../bootstrap-5/scss/tables";
#import "../../../bootstrap-5/scss/forms";
#import "../../../bootstrap-5/scss/buttons";
#import "../../../bootstrap-5/scss/transitions";
#import "../../../bootstrap-5/scss/dropdown";
#import "../../../bootstrap-5/scss/button-group";
#import "../../../bootstrap-5/scss/nav";
#import "../../../bootstrap-5/scss/navbar";
#import "../../../bootstrap-5/scss/card";
#import "../../../bootstrap-5/scss/accordion";
#import "../../../bootstrap-5/scss/breadcrumb";
#import "../../../bootstrap-5/scss/pagination";
#import "../../../bootstrap-5/scss/badge";
#import "../../../bootstrap-5/scss/alert";
#import "../../../bootstrap-5/scss/progress";
#import "../../../bootstrap-5/scss/list-group";
#import "../../../bootstrap-5/scss/close";
#import "../../../bootstrap-5/scss/toasts";
#import "../../../bootstrap-5/scss/modal";
#import "../../../bootstrap-5/scss/tooltip";
#import "../../../bootstrap-5/scss/popover";
#import "../../../bootstrap-5/scss/carousel";
#import "../../../bootstrap-5/scss/spinners";
#import "../../../bootstrap-5/scss/offcanvas";
#import "../../../bootstrap-5/scss/placeholders";
// Helpers
#import "../../../bootstrap-5/scss/helpers";
// Utilities
#import "../../../bootstrap-5/scss/utilities/api";
$utilities: map-merge(
$utilities,
(
"c-mr": (
property: margin-right,
values: (
0: 0rem,
1: 0.25rem,
2: 0.5rem,
3: 1rem,
4: 1.5rem,
5: 3rem,
),
),
)
);
#import "../../../bootstrap-5/scss/bootstrap";
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.