This question already has answers here:
Sass #each with multiple variables
(5 answers)
Closed 8 years ago.
I have several colours set up as classes
.black {background: $black;};
.red {background: $red;}
.yellow {background: $yellow;}
.grey {background: $grey;}
.white {background: $white;}
.blue {background: $blue;}
.full-black {background: #000;}
.light-black {background: #222;}
but i want to create a mixin which takes the class name and automatically creates the class name and fills in the background colour so i don't have to type this out every time..
I have tried something like this
#mixin colours ($black,$full-black,$light-black,$red,$blue,$yellow,$white,$grey) {
.(colours): background:{colours};
}
But can't figure out the right code.
you should use "associative array" to define the name of your colors and the code:
$colors: ("emerald": "#2ecc71", "carrot": "#e67e22");
#each $name, $hexa in $colors {
.#{$name} {
color: #{$hexa};
}
}
I made a simple codepen to show you: http://codepen.io/pik_at/pen/MYGJqY
Related
Before judging my situation, I am not using a typical Bootstrap approach to assign custom colors to variables. I am in a unique situation of depending on the Bootstrap CDN, and re-creating custom SASS variables that look like BS4 variables. Read on!
I feel like I am so close on the the following process. All I want to do is assign my array values to a class property name like so, (i.e. background-color: $theme-primary!important;)
//ORIGINAL THEME VARIABLES
$theme-colors: (primary:$m-color-blue, secondary: $m-color-off-white, success: $m-color-grey, info: $m-color-grey-light, warning: $m-color-gold, light: $m-color-white, dark: $m-color-grey-dark);
$theme-primary: map-get($theme-colors, "primary");
$theme-secondary: map-get($theme-colors, "secondary");
$theme-success: map-get($theme-colors, "success");
$theme-info: map-get($theme-colors, "info");
$theme-warning: map-get($theme-colors, "warning");
$theme-light: map-get($theme-colors, "light");
$theme-dark: map-get($theme-colors, "dark");
//MY LOOP TO ASSIGN BS4 BG COLORS TO MY CUSTOM COLORS.
$classes: primary secondary success warning danger light;
#each $class in $classes {
html body .bg-#{$class} {
//MY ISSUE IS HERE...IT DOES NOT LIKE HOW I AM FORMING THIS PROPERTY. SYNTAX ISSUE???
background-color: $theme-#{class} !important;
}
}
But when I attempt to compile it, I get the following error:
messageOriginal: Undefined variable: "$theme-".
I think I get the error, but how do I resolve?
I'm not sure why this would be necessary since there's already utility classes available for this; https://getbootstrap.com/docs/4.0/utilities/colors/#background-color
You can also feed the bootstrap sass straight into your build pipeline to use all their vars, mixins, functions already;
https://getbootstrap.com/docs/4.0/getting-started/theming/
However, I think you're looking for something more like this amigo; Cheers
$classes: (
primary: "#f00",
secondary: "#ddd",
success: "#00f",
warning: "#0f0",
danger: "#f00",
light: "#eee"
);
#each $key, $val in $classes {
.bg-#{$key} {
background-color: #{$val} !important;
}
}
If you're not importing the $theme variable from your _base / other directory then how do you expect the script to know what to fill it in with?
Your syntax is wrong, you need to wrap $theme with #{} as well so it's #{$theme}-#{class}
working example:
$classes: primary secondary success warning danger light;
$theme: 'blue'; // switch this with import theme.
#each $class in $classes {
html body .bg-#{$class} {
background-color: #{$theme}-#{$class} !important;
}
}
generated css:
html body .bg-primary {
background-color: blue-primary !important;
}
html body .bg-secondary {
background-color: blue-secondary !important;
}
html body .bg-success {
background-color: blue-success !important;
}
html body .bg-warning {
background-color: blue-warning !important;
}
html body .bg-danger {
background-color: blue-danger !important;
}
html body .bg-light {
background-color: blue-light !important;
}
If you are using Bootstrap4, you can directly add a new color to $theme-colors, add the new key and value
$theme-colors: (
"custom-color": #900
);
I have a mixin declared more or less like this
#mixin color-background {
background: yellow;
}
And i would wish to use this color as background of a png. but i cant seem to be able to mix the two
now what i would like to do is for example
.myImageWithBackgroundColor{
background: url(image.png),#include color-background
}
How can i acheive this with SASS and mixin?
You could store the background value of the mixin to a variable, and then use the variable instead of the whole mixin in the second code snippet.
$my-color: yellow;
#mixin color-background {
background: $my-color;
}
.myImageWithBackgroundColor{
background: url(image.png) $my-color;
}
This question already has answers here:
How to assign to a global variable in Sass?
(2 answers)
Closed 7 years ago.
I'm trying to wrap my brain around this one and hopefully someone here can enlighten me. I have this code as an example:
#mixin stuffs() {
color: $color;
}
$color: #000;
.single {
$color: white;
#include stuffs();
}
I would expect that $color inside the scope of .single would override the global $color value, however it does not. Can someone explain why? What am I missing here?
Ok - let's see if I can break this down using the example you gave.
#mixin stuffs() {
color: $color;
}
$color: #000;
.single {
$color: white;
#include stuffs();
}
You're expecting that the local variable version of $color (i.e. white) would be displayed in the .single selector rather than black.
But you need to separate the local scope of .single from the local scope of the mixin stuffs. They are not the same thing. You would still need to "use" the local variable version of $color (i.e. white) within the .single selector like this:
#mixin stuffs() {
color:$color;
}
$color:#000;
main
{
$color:white;
#include stuffs();
color:$color;
}
Please let me know if I've missed something for you and check out http://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498 for more information about scope.
This question already has answers here:
Can I use variables for selectors?
(4 answers)
Closed 7 years ago.
I am trying to make a css class that can use a number as input for a style associated with the class. For example:
.font-<size> {
font-size: <size>px;
}
where 'size' is a number.
Is this possible with scss?
MY SOLUTION:
This is what I ended up doing which is hard coded but gets the job done:
// Generates some useful quick font size classes
$f-sizes: 1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30;
#each $i in $f-sizes {
&.font-#{$i*2}:before {
font-size: #{$i*2}px;
}
}
Which will allow me to access font sizes 2 through 60 via class .font-28.
You would need a mixin.
http://thesassway.com/advanced/pure-sass-functions
#mixin size-mixin($some-number) {
font-size: $some-number;
}
Then you would just include this mixing on your classes.
.font-class {
#include size-mixin(10px);
}
$number: 10;
.font-#{$number} {
font-size: #{$number}px;
}
The SCSS code above compiles into CSS code as follows:
.font-10 {
font-size: 10px; }
This question already has answers here:
Sass - Manipulate inherited property?
(4 answers)
Closed 7 years ago.
I keep finding myself wanting to refer to a property of the current class when working in SASS. Usually this comes up as a way to make things more reusable or handle interactions. For example:
.circle
background-color: $brandColor
.circle:hover
background-color: $brandColor + 50
.square
background-color: $brandColor1
.square:hover
background-color: $brandColor1 + 50
I would prefer to write the code more DRYly, like this:
.circle
background-color: $brandColor
.square
background-color: $brandColor1
.circle:hover,
.square:hover
background-color: &background-color + 50
Is this, or something similar, possible in SASS?
No, there is nothing like that in Sass. You would need to use a mixin to get the DRYness you're looking for.
#mixin colorize($color) {
background-color: $color;
&:hover {
background-color: $color + 50;
}
}
.circle {
#include colorize($brandColor1);
}
.square {
#include colorize($brandColor2);
}