I'm using bootstrap 4 with sass in my application. Bootstrap provides a custom input checkbox but only for the primary theme color.
I've read some things about generating classes with sass using #each and #mixin, but none of them were clear to me. As you can se in the code bellow i did it by hand typing every class and color.
.custom-checkbox-primary{
.custom-control-input:checked ~ .custom-control-label::before {
color: $primary;
border-color: $primary;
background-color: $primary;
}
}
.custom-checkbox-secondary{
.custom-control-input:checked ~ .custom-control-label::before {
color: $secondary;
border-color: $secondary;
background-color: $secondary;
}
}
.custom-checkbox-danger{
.custom-control-input:checked ~ .custom-control-label::before {
color: $danger;
border-color: $danger;
background-color: $danger;
}
}
I want sass to generate these 'custom-checkbox-{{theme-color}}' dynamically for me.
You can use #each to iterate the theme-colors like this..
#each $color, $value in $theme-colors {
.custom-checkbox-#{$color}{
.custom-control-input:checked ~ .custom-control-label::before {
color: $value;
border-color: $value;
background-color: $value;
}
}
}
Demo: https://codeply.com/go/imgvc0X9l0
Related: Extending Bootstrap 4 and SASS
Related
I have an existing project with a scss file that uses semantic variables:
$background-color: white;
body {
background-color: $background-color;
}
I would like to change the background to black when I add a theming class to the body:
<body class="theme-dark">...</body>
and back to white if I remove the class (or switch to a theme-light).
I haven't found any light-weight methods to do this in scss (parametrizing a class for each theme seems like a very hard to maintain approach).
I've found a hybrid scss/css-custom properties solution:
original:
.theme-light {
--background-color: white;
}
update (based on Amar's answer):
:root {
--background-color: white;
}
.theme-dark {
--background-color: black;
}
$background-color: var(--background-color);
body {
background-color: $background-color;
}
Defining the scss variable as having a css-variable expansion as the value, i.e. (from above):
$background-color: var(--background-color);
generates the following css:
:root { --background-color: white; }
.theme-dark { --background-color: black; }
body { background-color: var(--background-color); }
which seems to be what we want...?
I like it since it only requires changing the definition of $background-color (not every usage in a very large scss file), but I'm unsure if this is a reasonable solution? I'm pretty new to scss, so maybe I've missed some feature..?
Doing this with SCSS is possible but you would have to add styles to all elements you want to theme. That is because SCSS is compiled at build-time and you can't toggle the variables with classes. An example would be:
$background-color-white: white;
$background-color-black: black;
body {
background-color: $background-color-white;
}
.something-else {
background-color: $background-color-white;
}
// Dark theme
body.theme-dark {
background-color: $background-color-black;
.something-else {
background-color: $background-color-black;
}
}
The best way to currently do it is by using CSS variables. You would define the default variables like this:
:root {
--background-color: white;
--text-color: black;
}
.theme-dark {
--background-color: black;
--text-color: white;
}
Then, you would use these variables in your elements like this:
body {
background-color: var(--background-color);
color: var(--text-color);
}
If the body element has the theme-dark class, it will use the variables defined for that class. Otherwise, it will use the default root variables.
All credit goes to Dmitry Borody
I would recommend an approach like what is mentioned in this Medium article. With this approach, you can assign what classes need to be themed without specifically mentioning the theme name so multiple themes can be applied at once.
First, you set up a SASS map containing your themes. The keys can be whatever makes sense to you, just make sure that each theme is using the same name for the same thing.
$themes: (
light: (
backgroundColor: #fff,
textColor: #408bbd,
buttonTextColor: #408bbd,
buttonTextTransform: none,
buttonTextHoverColor: #61b0e7,
buttonColor: #fff,
buttonBorder: 2px solid #fff,
),
dark: (
backgroundColor: #222,
textColor: #ddd,
buttonTextColor: #aaa,
buttonTextTransform: uppercase,
buttonTextHoverColor: #ddd,
buttonColor: #333,
buttonBorder: 1px solid #aaa,
),
);
Then use the mixin and function pair to add theme support.
body {
background-color: white;
#include themify {
background-color: theme( 'backgroundColor' );
}
}
.button {
background-color: lightgray;
color: black;
#include themify {
background-color: theme( 'buttonBackgrounColor' );
color: theme( 'buttonTextColor' );
}
&:focus,
&:hover {
background-color: gray;
#include themify {
background-color: theme( 'buttonBackgroundHoverColor' );
color: theme( 'buttonTextHoverColor' );
}
}
}
If you're going to be adding a lot of themes or a theme will be touching a lot of stuff, you might want to set up your SCSS files a little differently so that all the theming doesn't bloat your main CSS file (like the example above would do). One way to do this might be to create a themes.scss file and replicate any selector paths that need theming and have a second build script that outputs just the themes.scss file.
The Mixin
#mixin themify( $themes: $themes ) {
#each $theme, $map in $themes {
.theme-#{$theme} & {
$theme-map: () !global;
#each $key, $submap in $map {
$value: map-get(map-get($themes, $theme), '#{$key}');
$theme-map: map-merge($theme-map, ($key: $value)) !global;
}
#content;
$theme-map: null !global;
}
}
}
The Function
#function themed( $key ) {
#return map-get( $theme-map, $key );
}
in the Header of my HTML-Page i set the following CSS Variables:
:root{
--data-color-primary: #ffcc00;
--data-color-secondary: #4b4b4b;
}
In my SASS-File i use it as follow:
DIV.color {
&.color-primary {
background-color: var(--data-color-primary);
}
&.color-secondary {
background-color: var(--data-color-secondary);
}
}
Now i try to set the font-color depending on the brightness of the background-color:
#function set-notification-text-color($color) {
#if (lightness($color) > 60) {
#return #000000;
} #else {
#return #ffffff;
}
}
DIV.color{
&.color-primary {
background-color: var(--data-color-primary);
color: set-notification-text-color(var(--data-color-primary));
}
}
But in my SASS-compliler i get the following i get the following Error:
Error: argument $color of lightness($color) must be a color
How is ist possible to hand over der CSS variable to the function.
My Problem is, the CSS Variables are set in the Backend of my CMS by User (Liferay 7) an will be rendered in a *.FTL-File and is printed in the HTML-Code.
$primary: ${clr_primary};
$secondary: ${clr_primary};
and then i cant use the SASS-Variable $primary in my SASS-File.
Use SASS variables in your CSS variables.
$primary: #ffcc00;
$secondary: #4b4b4b;
:root{
--data-color-primary: #{$primary};
--data-color-secondary: #{$secondary};
}
Now call your mixin
DIV.color{
&.color-primary {
background-color: $primary;
color: set-notification-text-color($primary);
}
}
Another options would be to create a mixin which retrieves the CSS variable
#function color($color-name) {
#return var(--data-color-#{$color-name});
}
Now call that function like so
DIV.color {
&.color-primary {
background-color: color(primary);
color: set-notification-text-color(color(primary));
}
}
Check out this link for usefull information about combining CSS and SASS variables
https://codepen.io/jakealbaugh/post/css4-variables-and-sass
If you need to change CSS variables outside of :root you can do the following
.class {
// sass-lint:disable no-duplicate-properties
#{--background}: transparent;
#{--background-focused}: transparent;
// sass-lint:enable no-duplicate-properties
}
and this compiles to
.class {
--background: transparent;
--background-focused: transparent;
}
I am trying to get a mixin done to achieve the following.
Im having a list of social buttons. They each share the same styles except the background-color and :hover states.
My current SASS approach. (will return invalid CSS error)
#mixin btn-social($network) {
.#{$network} {
background: $#{$network}; // trying to reference a global variable
&:hover, &:focus {
background: darken($#{$network}, $darken-modifier);
}
}
}
To render like this:
.facebook {
background: blue; // stored in $facebook
}
.facebook:hover, .facebook:focus {
background: darkblue; //darkend value above
}
I'm somehow lacking the right terms for a proper google search. I'd appreciate a push in the right direction.
Thanks for the help.
You can use a sass map to store the color variables and then find the right color using the name you pass into your mixin like so jsfiddle:
$colors: (
facebook: blue,
twitter: red
);
$darken-modifier: 100%;
#mixin btn-social($network) {
.#{$network} {
background: map-get($colors, $network);
&:hover, &:focus {
background: darken(map-get($colors, $network), $darken-modifier);
}
}
}
#include btn-social(facebook);
#include btn-social(twitter);
<a class="facebook">
facebook
</a>
<a class="twitter">
twitter
</a>
Edit: updated to include #TomOakley's suggestion below.
Please try the following:
#mixin btn-social($network, $color, $darkColor) {
#{$network} {
background: $color;
&:hover, &:focus {
background: $darkColor;
}
}
}
.foo {
#include btn-social('.facebook', blue, darkblue)
}
This compiles to:
.foo .facebook {
background: blue;
}
.foo .facebook:hover, .foo .facebook:focus {
background: darkblue;
}
Check out this reference for SASS interpolation.
I have some blocks with different background-colors (which are set in variables) and if a user hovers one of them, the color shall light/fade a bit.
Therefore I use this one:
.block1:hover,.block2:hover{
background-color:lighten($color1,40%);
}
But this just fades one static color - $color1 - to 40%. How would I do that, if .block1 had $color1 and .block2 had $color2 as background colors set? So the result should be
.block1:hover{
background-color:lighten($color1,40%);
}
.block2:hover{
background-color:lighten($color2,40%);
}
What do I need to use therefore?
Use a mixin, like so:
.block1 {
.backgroundsetup($color1);
}
.block2 {
.backgroundsetup($color2);
}
.backgroundsetup($color, $amt: 40%) {
background-color: $color;
&:hover {
background-color: lighten($color, $amt);
}
}
There's no special way to write the CSS you have in your example in SCSS, that would be the way you do it. But if you want to optimize and write less code, then you could take advantage of SASS' hashmaps and the foreach loop to do this for you.
SASS
$color1: #4e9bac;
$color2: #248cff;
$color3: #3b5998;
$blocks: (
block1: $color1,
block2: $color2,
block3: $color3,
);
#each $block, $color in $blocks {
.#{$block} {
background-color: $color;
&:hover {
background-color: lighten($color, 40%);
}
}
}
CSS Output
.block1 {
background-color: #4e9bac;
}
.block1:hover {
background-color: #d8eaee;
}
.block2 {
background-color: #248cff;
}
.block2:hover {
background-color: #f0f7ff;
}
.block3 {
background-color: #3b5998;
}
.block3:hover {
background-color: #bbc8e4;
}
I am making a web app that is used in three (or more) different contexts, and I want each context to have a different color scheme. However, I don't want to have to maintain three different stylesheets when all that changes is colors, typically.
For instance, suppose the themes are red, blue, and orange. One of my stylesheets describes the link colors:
a {
color: $some_color;
}
I want to split this based on the class applied to the body:
body.style1 {
a {
color: $red;
}
}
body.style2 {
a {
color: $blue;
}
}
body.style3 {
a {
color: $orange;
}
}
You can see how this gets unwieldy pretty quickly if you're changing the style for lots of elements. Is there a way to do this more like this?
a {
&closest:body.style1 {
color: $red
}
&closest:body.style2 {
color: $blue;
}
&closest:body.style3 {
color: $orange;
}
}
This way I can code my scss in a clearer, more maintainable way.
It appers you don't have to have the & first, so this works (at least in 3.2.10):
a {
body.style1 & {
color: $red
}
body.style2 & {
color: $blue;
}
body.style3 &{
color: $orange;
}
}
This is what I prefer. Define a mixin like body-style :
#mixin body-style($style, $map) {
body.#{$style} & {
#each $property, $value in $map {
#{$property}: $value;
}
}
}
Then use this for every tag by passing $style as style class of body and $map as map of css keys and values.
a {
#include body-style(style1, (
color: red,
background: white
)
);
}
It will return :
body.style1 a {
color: red;
background: white;
}