I am using a package called Buefy which is a Vue.js wrapper for the Bulma CSS framework library. Buefy puts an attribute/property on its template components called type (e.g., type="is-warning"). As per the Buefy documentation, the term "is-warning" is pre-defined according to the $colors variable set within SCSS:
So I followed these instructions from Buefy to be able to customize the the $colors map, but what I would like to do, however, is keep the initial SCSS defined in those instructions within a single base.scss file, and then extend with my own customized SCSS file.
I have included the base.scss file in my Vue project with the following snippet in the vue.config.js file:
module.exports = {
css: {
loaderOptions: {
sass: {
prependData: `
#import "#/assets/scss/base.scss";
`
}
}
}
}
So my question is, how can I extend the $colors map in the base.scss with my own names and values?
This is a snippet from base.scss, where the $colors map is defined:
```css
$colors: (
"white": ($white, $black),
"black": ($black, $white),
"light": ($light, $light-invert),
"dark": ($dark, $dark-invert),
"primary": ($primary, $primary-invert),
"info": ($info, $info-invert),
"success": ($success, $success-invert),
"warning": ($warning, $warning-invert),
"danger": ($danger, $danger-invert),
"twitter": ($twitter, $twitter-invert)
);
```
So, again, my question is how can I extend the $colors map in a different file outside of base.scss (perhaps in App.vue) to leave the original untouched? I didn't see any solution shown in the scss docs.
Your custom color values would go in a variable (later merged into $colors) called $custom-colors, and it's actually described in the docs on "derived variables".
And to customize it:
// Import Bulma's core
#import "~bulma/sass/utilities/_all";
// Set your colors
$custom-colors: (
"facebook": ($blue, $white),
"linkedin": ($dark-blue, $white)
// etc.
);
// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: (
"white": ($white, $black),
"black": ($black, $white),
"light": ($light, $light-invert),
"dark": ($dark, $dark-invert),
"primary": ($primary, $primary-invert),
"info": ($info, $info-invert),
"success": ($success, $success-invert),
"warning": ($warning, $warning-invert),
"danger": ($danger, $danger-invert),
"twitter": ($twitter, $twitter-invert)
);
// Import Bulma and Buefy styles
#import "~bulma";
#import "~buefy/src/scss/buefy";
It's internally using a custom function called mergeColorMaps.
Related
If I use variables in the Bootstrap SCSS theme map, I get an Error.
My SCSS:
The Error:
This is theme-colors map in bootstrap 5:
$theme-colors: (
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
) !default;
--primary-violet is not a css variable generated in bootstrap 5, in the :root selector you have css properties that you can use to dinamically modify css without compile bootstrap . For example --bs-success-text
Instead if you want access in sass bootstrap variables or bootstrap maps, you have to work in your sass after bootstrap sass has been imported and you then can access a bootstrap variable like that:
$my-variable: $primary
where $primary is a bootstrap sass variable and my-variable is your variable.
To access the map you can do:
$my-variable: map.get($theme-colors,"primary")
This does the same thing above, but it reads the value stored into the map. But you don't need to, you can directly access sass bootstrap variables.
Buify bulma problem in vue2
I have trouble setting $primary color with buify / bulma.
The problem seems to be that the change ends up in the generated css file
The default color is purple # 7957d5
I have set the variable $ primary to pink # 3e912ba
For exactly the same element, it generates several different colors where the standard is in line 14617 min change of 12241
See blue arrow ->
Tho whole set up is:
VUE 2 “vue”: “^2.6.11”,
SASS DART “sass”: “^1.26.5”, “sass-loader”: “^8.0.2”,
Buefy “buefy”: “^0.9.10”,
Import bulma
In the SCSS file I set the colorvariabels for buefy with bulma as in the offical doc
#import '~bulma/sass/utilities/all';
// Set your colors
$primary: #e912ba;
$primary-light: findLightColor($primary);
$primary-dark: findDarkColor($primary);
$primary-invert: findColorInvert($primary);
$twitter: #4099FF;
$twitter-invert: findColorInvert($twitter);
// Lists and maps
$custom-colors: $primary;
$custom-shades: null !default;
// Setup $colors to use as bulma classes (e.g. 'is-twitter')
$colors: mergeColorMaps(
(
"primary": (
$primary,
$primary-invert,
$primary-light,
$primary-dark,
),
),
$custom-colors
);
// Links
$link: $primary;
$link-invert: $primary-invert;
$link-focus-border: $primary;
// Import Bulma and Buefy styles
#import '~bulma';
#import '~buefy/src/scss/buefy';
in the app.vue I import the scss
<style lang="scss">
#import "./css/style.scss";
</style>
three different css files is generated, where the first in the head is the one where the changes I make in $primary is saved. The last one is where I find the defualt-value for buefy $primary color.
It turned out that the problem was that I in the main.js file imported the buefy.css
import 'buefy/dist/buefy.css'
when I removed this it worked.
Does anybody know how I can use values that I have passed to a sass module (like shown below) inside another sass module that is not in the same scope but uses the module with #use?
I have a project where Sass modules are used in different files that don't always have the same styles.scss as a base. In fact I include our "core" via npm as a node module.
The core has a _core.scss file, and for every core-component a folder with at least 2 files. aA _config.scss file and a _functions.scss file and sometimes a _mixins.scss and a _generate.scss.
here is an example of the _core.scss:
#forward "colors/config";
#forward "colors/functions";
and the colors _config.scss file looks like this:
$colors: (
"primary": #8fc5de,
"secondary": #f25116,
"accent": #bcd955,
) !default;
and the _functions.scss like this:
#use "sass:map";
#use "config" as colors-cfg;
#function color($color-name) {
#if map.has-key(colors-cfg.$colors, $color-name) {
#return var(--adm-color-#{$color-name});
} #else {
#return var(--adm-color-unknown);
}
}
In the project we have 2 specific areas:
the sass folder, where we create all global stylings for the project itself
the components folder, where we style some components who can be used as webcomponents with a shadow dom (optional)
Example of styles.scss in the sass folder
#use "config" as adm-cfg;
#use "nodemodulespath/core/core" as adm;
and the config file:
#use "nodemodulespath/core/colors/config" as colors-cfg with (
$colors: (
"primary": #f59e4b,
"secondary": #f25116,
"accent": #bcd955,
"othercolor": #383723,
)
);
So far so good.
Now I want to use the colors with my color function inside the header.style.scss file. And here I have some problems with the values of the config.
Example:
#use "nodemodulespath/core/core" as adm;
.h1 {
color: adm.color("othercolor");
}
I can't use "othercolor" which i have added to the $colors map in _config.scss inside my color() function. I can only access the colors that are initially added inside the colors config from the core.
Inside the sass Folder i can access everything fine.
Any ideas how i can fix this? I already tried to pass new config values inside of header.style.scss like so:
#use "nodemodulespath/core/colors/config" as colors-cfg with (
$colors: (
"primary": #f59e4b,
"secondary": #f25116,
"accent": #bcd955,
"othercolor": #383723,
)
);
#use "nodemodulespath/core/core" as adm;
.h1 {
color: adm.color("othercolor");
}
But then I get the sass error that I can use the with() option just once.
Would be super cool if someone with a deeper understanding of the sass module system can help me with this one.
thank you!
I was able to find many different approaches on how to make a switchable themes in SASS I wasn't able to figure out how can I apply that approach to bootstrap overrides. Let's say I want to have light and dark theme and both themes would override bootstraps colors differently.
// Light-theme
$theme-colors: (
"primary": #8A2F4F
);
// Dark-theme
$theme-colors: (
"primary": #fff
);
In the example above are overrides for primary of theme-colors. How can I conditionally set them based on theme the user has selected?
Well,
there are many ways to do this. I'd suggest you to generate multiple CSS files based on the _variables.scss file. All you have to do is build new theme with different variable file. You can check this method in my public repo.
Other way would be to use CSS custom variables (called as custom properties). You can do something like this. I've just copy pasted and altered the CSS. It is just to give an idea.
in sass file,
$theme-colors: (
"primary": var(--primary-color);
);
and in other variable file,
element.dark {
--primary-color: black;
}
element.light {
--primary-color: white;
}
These are two method I would suggest.
Here is how I did it with React, Bootstrap and SASS:
In an index.scss file:
div#blue {
#import './blue.scss';
}
div#red {
#import './red.scss';
}
// The rest of bootstrap
// Seems to be necessary to import twice to get fonts to work
#import "node_modules/bootstrap/scss/bootstrap";
Then red.scss I over-ride Boostrap where needed:
$theme-colors: (
"primary": red,
);
// The rest of bootstrap
#import "node_modules/bootstrap/scss/bootstrap";
blue.scss is similar.
Finally my top level React component:
import './index.css'
import * as React from 'react'
import Button from 'react-bootstrap/Button'
export const Container = () => {
const [color, setColor] = useState('red');
const buttonClick = () => {
if (color === 'red') setColor('blue')
if (color === 'blue') setColor('red')
}
return (
<div id={theme} >
Switch themes...
<Button variant="primary" onClick={buttonClick}>Button</Button>
</div>
)
}
Press the button and it will change from red to blue. I am guessing that a className rather than a div selector is a better way to do this - but this approach is working for me so I am happy. Not sure how robust this solution is in complex applications yet.
I am using bootstrap 4 with SCSS and have troubles to find the variable which is responsible for the background of an "btn-primary" element which is active.
Of course I could just override the css file like that after the compiling process.
.btn-primary:not(:disabled):not(.disabled):active{
background-color:red;
}
But this is a bit hacky. I would like to undestand how bootstrap is generating this particular color? I am pretty sure I am missing something.
Please see this jsfiddle and click on the test button to see what I mean.
Solved: The color is stored within $primary (Thank you ReSedano)
Just do a
$primary: #ff00ff;
before you load bootstrap.
Here you can understand How to override boostrap4 using scss: How to extend/modify (customize) Bootstrap 4 with SASS.
In your case you have to override the map $theme-colors:
$theme-colors: (
"primary": #ff0000 // <= put here your color
);
To understand "how bootstrap is generating this particular color?" in _buttons.scss file you can find the function:
#each $color, $value in $theme-colors {
.btn-#{$color} {
#include button-variant($value, $value);
}
}
So to change colors, Bootstrap loop the map call $theme-colors that you find in _variable.scss file.
$theme-colors: () !default;
$theme-colors: map-merge(
(
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
),
$theme-colors
);
this is a simple error . bootstrasp.css after style.css if yes can you move bootstrap.css before style.css
like
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/bootstrap/dist/css/bootstrap.min.css">
<!-- custom CSS -->
<link rel="stylesheet" href="css/style.css">
use css in style.css
.btn-primary:not(:disabled):not(.disabled) {
background: red;
}
Theme colors is defined in _variables.scss
Buttons is generated in _buttons.scss and uses button-variant() mixin
// _variables.scss
$theme-colors: map-merge(
(
"primary": $primary,
"secondary": $secondary,
"success": $success,
"info": $info,
"warning": $warning,
"danger": $danger,
"light": $light,
"dark": $dark
),
$theme-colors
);
// _buttons.scss
#each $color, $value in $theme-colors {
.btn-#{$color} {
#include button-variant($value, $value);
}
}