Is it posible to invoke a mixin doing something like this?
#mixin font-mixin ($mixinName, $color) {
#include #{$mixinName};
color: $color;
}
I mean I tried that, it does not work but,is there any way to do something like this? I want to dynamically call a mixin providing the name of the mixin I need to invoke as parameter of another mixin since it will help reducing a lot of code in my project
You can't do this directly, but you can work around it. You could do kind of a switch statement:
#mixin breakpoint($mixin) {
#if $mixin == mixin1 {
#include mixin1;
}
#if $mixin == mixin2 {
#include mixin2;
}
}
Related
I am new in SCSS so bear with me :)
I have a use case where a SCSS variable --my-variable can exist and can have a value depending on some settings from the backend. So, if --my-variable exists and has a value I should override some styling. If not I shouldn't override anything.
Example:
In file1 I have:
.my-div {
color: red;
}
In file2 I should have something like this:
.my-div {
#include customize(color, --my-variable);
}
#mixin customize($property, $variable) {
#if $variable and (var($variable)) {
#{$property}: var($variable);
}
}
The problem is that the if condition inside the mixin customize() is always true even if my document has no CSS variable called --my-variable. What am I doing wrong?
Thank you
Sass has a function that check if the variable exists.
variable-exists()
$colorVariable: crimson;
#if variable-exists($colorVariable) {
// Do some styling if the variable exists
}
I'm trying to pass some CSS Custom Properties to a SASS Mixin. I'm able use the variables when applied directly in the styling I want. But when I try to use a variable in an If statement, it doesn't work.
Mixin Example:
#mixin bg-color($hue, $status) {
background: hsl($hue, 50%, 50%); // $hue works as expected
#if $status == 'danger' { // doesn't work!
color: 'red';
} #else if $status == 'warning' { // doesn't work!
color: 'orange';
} #else { // always enters the else branch
color: 'black';
}
}
CSS:
:root {
--hue: 195;
--status: 'default';
}
.demo {
#include bg-color(var(---hue), var(---status));
}
If I manually add the status value to the mixin, it works:
.demo {
#include bg-color(var(---hue), 'danger');
}
Any idea what might be the issue?
UPDATE: As #temani-afif mentioned, this approach isn't possible because SASS files are compiled before CSS variables are used.
If you have some file, where you import all SCSS files, it depends which is imported first and which are imported after.
Make sure that one that you need to be Read by VS is first.
For example i needed to read first my variables, so it have to be first, other way, my code read mixin, and doesnt know yet what is '$blue'.
Using Bootstrap 4, I'm trying the change the value of brand-primary in a mixin:
// variables
$theme-colors: (
"main": #9fa28b,
"another-section": #ec008c,
"yet-another-section": #00b0d8
);
// main scss
#mixin theme($color){
$theme-colors: (
"brand-primary": $color
);
}
body {
#include theme(theme-color($key: "main"));
&.another-section {
#include theme(theme-color($key: "another-section"));
}
&.yet-another-section {
#include theme(theme-color($key: "yet-another-section"));
}
}
This compiles without an error but nothing with the classes another-section or yet-another-section are in the compiled css.
Is there a way of overriding brand-primary within a mixin (or any variable)?
If i understand you correct you want to change the color. All you have to do is override primary color check this link How to change the bootstrap primary color?
Take a look here:
https://sass-lang.com/documentation/variables#advanced-variable-functions
use map.get($theme-colors, "warning"); instead!
I wanted to make a mixin for column spanning containers in SASS using the Susy framework where I could just use an include in a div and use the span-columns such as this:
#mixin container($columns, $ofColumns) {
#include span-columns($columns,$ofColumns);
}
Then in CSS use it like this:
#foo {
#include container(4,12);
}
But I get the error in the output css 'Mixin container is missing argument $columns.' What am I doing wrong here?
I'm trying to create a sass mixin that will take an undetermined number of items in a list as arguments in a mixin.
The end goal is to have a mixin that can be used to style the colors of different values for a progress bar (i.e. red when the bar has a low value). Here's what I came up with for the mixin:
#mixin progress-value($value..., $color...) {
progress[value="#{$value}"] {
color: #{$color};
&::-webkit-progress-value { background-color: #{$color}; }
&::-moz-progress-bar { background-color: #{$color}; }
}
}
// Calling the mixin
#include progress-value("0.25, #de2b23", "0.5, #FF8330", "0.75, #8A9F4A", "1, #14BB64");
I know this is a list I'm using with the include, but I'm not sure how to break that list up and pass it to each argument, or if this is even the best way to go.
I could create a simpler version of the mixin and call it for each value being styled, but that didn't seem very DRY.
You can try something like this:
#mixin make_progress($val,$col){
progress[value="#{$val}"] {
color: #{$col};
&::-webkit-progress-value { background-color: #{$col}; }
&::-moz-progress-bar { background-color: #{$col}; }
}
}
#mixin progress-value($value-color...) {
#each $progress in $value-color {
#include make_progress(nth($progress,1),nth($progress,2));
}
}
// Calling the mixin
#include progress-value(0.25 #de2b23);
// and with a multideimensional list
#include progress-value(0.5 #FF8330, 0.75 #8A9F4A, 1 #14BB64);
This will work now if you pass the parameters as a comma separated list of space separated pairs - value/color, like I did in the above example, or in some other way make clear that your list of parameters is multidimensional - like including each passed pair in parentheses:
// with a single parameter
#include progress-value((0.25, #de2b23));
// or with multiple parameters
#include progress-value((0.5, #FF8330), (0.75, #8A9F4A), (1, #14BB64));
I also made a separate mixin make_progress, for a better overview, and in case you would want to call it in some other instance outside the loop, but you could easily leave that inside the loop.
DEMO