I have been trying to implement additional spacing increments to Bootstrap, however the SASS map-merge seems to have no impact of the available classes.
I have followed the Boostrap 5.2 documentation on how the $spacers map should be formatted, and I have added a map-merge to my SASS file:
#import "../../src/bootstrap/scss/functions";
#import "../../src/bootstrap/scss/variables";
#import "../../src/bootstrap/scss/mixins";
#import "../../src/bootstrap/scss/_maps.scss";
#import "../../src/bootstrap/scss/_utilities.scss";
$spacer: 1rem;
$custom-spacers: ( 6: $spacer * 4, 7: $spacer * 5, 8: $spacer * 6,);
$spacers: map-merge($spacers, $custom-spacers);
#import "../../src/bootstrap/scss/bootstrap.scss";
I have then been checking the resulting .css file once compiled with gulp and it has no instance of any -6 spacing elements.
What am I missing?
Related
I am having some difficulty overwriting !default values in SCSS while using #use. When I use #import instead of #use it behaves correctly but while using #use the console gives an error (This module and the new module both define a variable named "$variable-name").
When I change the variable inside the same file where I assign the variable to an element it behaves correctly:
// variables/variable.scss
$color-accent: red !default;
// variables/index.scss
#forward ./variable.scss;
// change.scss
#use './variables/index' as *;
$color-accent: blue;
body {
background-color: $color-accent;
}
// body background color is blue
But when I try overwriting it in a seperate file it won't work:
// change.scss
$color-accent: blue;
// variables/index.scss
#forward ./variable.scss;
#forward ./change.scss;
// base.scss
#use './variables/index' as *;
body {
background-color: $color-accent;
}
// main.scss
#use './base';
// error: Two forwarded modules both define a variable named $color-accent
Also, when I only #forward the variable.scss and #use the change.scss in the main.scss file it doesn't give the right outcome (body background color stays red without an error).
Does anyone have a suggestion? All help is appreciated.
Joop
The error is where you used two #forward in index.scss and these two files have variables with the same name. Just loading the change.scss file with #import can solve the problem.
More Information about the difference between #import, #use and #forward is here: https://www.liquidlight.co.uk/blog/use-and-import-rules-in-scss/.
// variables/index.scss
#forward "./variable.scss";
#import "./change.scss";
I'm trying to overwrite the color of text in my Bulma navbar, it works if I'm using an !important tag in my regular SCSS files but I'm trying to use as few !important tags as possible.
The Bulma docs tell me that I can overwrite the Bulma color variables, but all my attempts have been futile.
What I've tried so far:
Created a _bulmaTheme.scss file
Tried to overwrite the colors in this file
The colors do not get overwritten in the front end, I can see them further down my console as overwritten by the inital value Bulma sets, see attached screenshot of my Chrome console
I got a bit desperate so I've tried to set many variables, according to my brain I should only need to overwrite the $navbar-link variable. The content of my _bulmaTheme.scss currently looks like this
#import "bulma/sass/utilities/initial-variables.sass";
$navLinkColor: rgba(156, 2, 2, 0.7);
$navbar-item-color: rgba(156, 2, 2, 0.7);
$navbar-background-colo: $navLinkColor;
$navbar-item: $navLinkColor;
$navbar-item-active-color: $navLinkColor;
$navbar-item-hover-color: $navLinkColor;
$navbar-item-color: rgba(156, 2, 2, 0.7);
$nav-link: $navLinkColor;
$navbar-link: rgba(156, 2, 2, 0.7);
$navbar: $navLinkColor;
$navbar-item-color: $navLinkColor;
$navbar-item-hover-color: $navLinkColor ;
$navbar-item-hover-background-color: $navLinkColor ;
$navbar-item-active-color: $navLinkColor ;
$navbar-item-active-background-color: $navLinkColor ;
#media screen and (min-width: 1024px) {
$navLinkColor: rgba(156, 2, 2, 0.7);
$navbar-item-color: $navLinkColor;
$navbar-background-colo: $navLinkColor;
$navbar-item: $navLinkColor;
$navbar-item-active-color: $navLinkColor;
$navbar-item-hover-color: $navLinkColor;
$navbar-item-color: $navLinkColor;
$nav-link: $navLinkColor;
$navbar-link: rgba(156, 2, 2, 0.7);
$navbar-item-color: rgba(156, 2, 2, 0.7);
$navbar: $navLinkColor;
}
#import "bulma/bulma.sass";
For some reason none of the overwrites do anything, I tested if the scss file works by setting a different color on my body tag and that worked just fine. I import the Bulma theme code in my main app.scss file like so
#charset "utf-8";
#import "./theme.scss";
#import "./typography.scss";
#import "./bulmaTheme.scss";
...SCSS (and no extra imports) underneath
I'm using Bulma in a Gatsby project running Bulma version 0.8.1, any ideas on what I'm doing wrong
You have a typo there, mate:
$navbar-background-colo -> $navbar-background-color
I am getting "Incompatible units: 'rem' and 'px'" when overriding the Bootstrap 4.3.1 variables in a custom override sass file.
I have tried positioning following paths on custom sass file on top of the file and last line of the file as instructed on Bootstrap 4 documentation.
#import "node_modules/bootstrap/scss/functions";
#import "node_modules/bootstrap/scss/variables";
#import "node_modules/bootstrap/scss/mixins";
Error in terminal
ERROR in ./src/scss/main.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/scss/main.scss)
Module build failed:
$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;
^
Incompatible units: 'rem' and 'px'.
Remove <br> from the SCSS file first and this the problem of calc() function not the problem of px or rem.
NOTE
calc() function is the inbuilt function of CSS, so whenever you call calc() in SCSS, you need to use #{} technique to use the variable
height: calc(100% - #{$body_padding})
Now I give you one example
$custom-select-padding-y = 50px;
$custom-select-feedback-icon-padding-right: calc((1em + #{2 * 50px}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;
2 * 50px = 100px and so on after that, it cant calculate 1em + {random px} so, its return undefined and compiler give error.
calc() calculates 2 * 5px = 10px or 2 * 1rem = 32px.
calc() cant calculate 2rem + 1em, 1rem + 1px etc.
My SCSS compiles fine on sassmeister 1:
$black: "black_rgb(0,0,0)";
$honey-brown: "honey-brown_rgb(144,122,106)";
$red: "red_rgb(255,0,0)";
$paints: $black, $honey-brown, $red;
#each $color in $paints {
$colSplit: str-index($color, _);
$colName: str-slice($color, 1, $colSplit - 1);
$colVal: str-slice($color, $colSplit + 1);
.paint-#{$colName}-paint {background-color: #{$colVal};}
}
However Shopify is throwing an error:
Invalid CSS after ".paint-str-slice": expected selector, was
"("black_rgb(0,0..." at 9706
So it looks like the variable concatenation .paint-#{$colName}-paint isn't working properly.
I am not sure if it is to do with versions of software - I set Sassmeister to the lowest settings (v3.3.14) but it still works fine there. I do not know how to find out the version of scss Shopify uses.
Try to use a map:
$paints:(
black: rgb(0,0,0),
honey-brown: rgb(144,122,106),
red: rgb(255,0,0)
);
#each $name, $color in $paints {
.paint-#{$name}-paint {background-color: $color;}
}
It turns out that Shopify uses an old version of Sass which doesn't support some of the latest features such as #import for partials or indeed Maps1:
Note: Shopify is using a forked version of Sass v3.2 which does not support importing partial Sass files with the #import directive. This may cause some issues when trying to work with 3rd party Sass libraries.
I am building a system to take default stylesheets, and merge with a theme, and a base theme to produce the final site css, however i was hoping to find a way to assign variables by reference, not by value so i can do things like this.
base.vars.scss
$PrimaryFg: blue
$LinkFg: $PrimaryFg
$DefaultFont: opensans
$HeadingFont: $DefaultFont
basetheme.vars.scss
$PrimaryFg: yellow
$CaptionFont: $HeadingFont
theme.vars.scss
$DefaultFont: Verdana
base.rules.scss
body {font: $DefaultFont }
h1,h2,h3,h4,h5,h6 {font: $HeadingFont; }
a {color: $LinkFg }
basetheme.rules.scss
caption {font: $CaptionFont; }
theme.rules.scss
#import 'base.vars.scss';
#import 'basetheme.vars.scss';
#import 'theme.vars.scss';
#import 'base.rules.scss';
#import 'basetheme.rules.scss';
The main problem i have is that, $HeadingFont will be set to opensans, and wont change to Verdana, and the link FG colour will still be blue,
I cant find a solution, i was hoping that the $HeadingFont: $DefaultFont, would not assign the value immediately, but assign the variable, so it could be changed later.
Yes i am aware of !default, however it is a complete mess trying to do this with !default.