I want to match some strings in my class name using mixin. It works without mixins, but when I used mixin, I can't pass the variable into the string.
What was working
div[class^='myclass-'], div[class*=' myclass-'] {
#content
}
What doesn't work
#mixin startWith($name){
div[class^=$name], div[class*=' ' + $name'] {
#content;
}
}
There is a typo in your code. Use this
#mixin startWith($name){
div[class^=$name], div[class*=$name] {
#content;
}
}
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'.
I created two mixins which assign different values to the same variable that I want to use later in the header background url.
Depending on the html class variable $image-name should be different since I include different mixins but it always has a "second-img" value even though class .second doesn't exist in my html.
Please let me know if there is a better way to do this.
Thanks!
#mixin first-image($image) {
$image-name: $image !global;
}
#mixin second-image($image) {
$image-name: $image !global;
}
html.first {
#include first-image("first-img");
}
html.second {
#include second-image("second-img");
}
header {
background-image: url(../images/#{$image-name}-banner.jpg);
}
Your code when executed looks like this:
html.second {
second-img {
$image-name: second-img !global;
}
}
Your mixing is pulling in the value of $image that you defined during the #include as they have the same variable names.
#mixin second-image($image) {
$image-name: $image !global;
}
Change the variable name to something else and it won't display the same:
#mixin second-image($image) {
$image-name: $thingy !global;
}
Hello lovely stackoverflow community. I'm a new coder, and brand new to sass & intermediate css topics. I'm working on a site that has themes and I'm trying to customize the design of a 3rd party survey widget we are using.
Our themes are controlled via a mixin that looks like this:
#mixin themify() {
// Iterate over the themes
#each $theme-name, $theme in $themes {
$current-theme: $theme !global;
#if $theme-name == ‘abc’ {
#content;
} #else {
.theme-#{$theme-name} & {
#content;
}
}
}
}
The theme-name is on the body tag & inherited by every element. So can be used to target all children with ease. However, for the survey, I need to style it using a selector targeting a specific data-attribute on the body. For ex, this selector successfully allows me to target a survey element:
Body[data-survey-number='77777'] div#a .b {
// styles successfully applied!
}
But when I want to use the themify mixin:
Body[data-survey-number='77777'] div#a .b {
#include themify {
background-color:theme-get(secondary-color);
}
it breaks. I'm seeing that the sass compiles to:
theme-name Body[data-survey-number='77777'] div#a .b {
// never applies to anything :(
}
However what works is when a selector is compiled to this (appended at the end with no space):
Body[data-survey-number='77777']theme-name div#a .b {
// this works! :)
}
I'm wondering how I can get this. Perhaps creating a new mixin?
I appreciate all / any thoughts.
I have the following mixins to make easy work with BEM syntax, sass 3.3.2 code:
=b($name)
.#{$name}
#content
=e($name)
&__#{$name}
#content
=m($name)
&--#{$name}
#content
+b(menu)
+e(item)
color: grey
+e(item)
+m(alert)
color: red
This gives me the desired result:
.menu__item {color: grey;}
.menu__item--alert {color: red;}
So this works pretty nice for element level modifiers, however when i want to have block level modifiers the problem begins:
+b(menu)
+m(theme-1)
+e(item)
color: blue
css output:
.menu--theme-1__item {color: blue;}
when the thing i really want is this:
.menu--theme-1 .menu__item {color: blue;}
So i need a way to check what the context of an element is, when the context is a block there is no problem but when is a modifier the syntax fails. I tried inside e mixin to take the parent selector as string, so when e parent is b it will not have the -- syntax, in the other way when his parent is m it will have the -- syntax, with that i could decide what syntax use for both context.
I didn't find a way to take the parent selector as a string and i think is not possible, is there a way to make this works?
Update
I found a not very straightforward solution with it works fine, it uses a context argument in the element mixin:
=e($name, $context:null)
#if $context
&
+b($context)
&__#{$name}
#content
#else
&__#{$name}
#content
Now i can call the mixin as follows:
+b(menu)
+m(theme-1)
+e(item, nav)
color: blue
getting:
.menu--theme-1 .menu__item {color: blue;}
Answering a 2 year old question - long shot :) But hopefully could help someone else as well.
So a more robust way would be to improve your Element mixin to check if the parent selector has a modifier.
So you would need 2 functions:
one to check if a selector contains a modifier
one to get the block name from that selector
#function _bem-selector-has-modifier($selector) {
$selector: _bem-selector-to-string($selector);
#if str-index($selector, $bem-modifier-separator) or str-index($selector, ':') {
#return true;
} #else {
#return false;
}
}
#function _bem-get-block-name($selector) {
$selector: _bem-selector-to-string($selector);
$modifier-separator: '--';
$modifier-start: str-index($selector, $modifier-separator) - 1;
#return str-slice($selector, 0, $modifier-start);
}
And then you just need to apply the check in your element mixin
$bem-element-separator: '__';
#mixin element($element) {
$selector: &;
#if _bem-selector-has-modifier($selector) {
$block: _bem-get-block-name($selector);
#at-root {
#{$selector} {
.#{$block + '__' + $element} {
#content;
}
}
}
} #else {
#at-root {
#{$selector +'__' + $element} {
#content;
}
}
}
}
So calling element('item') inside a modifier('with-modifier') should render a .block--with-modifier .block__item selector in your compiled CSS and you won't have to manually pass the context.
The code posted is SCSS, but the idea should be the same with SASS.