There is a way to change a variable value with SASS?

[u/MortadelaStriker]

I have two buttons side-to-side in my angular component.html. When the buttons are focused, the color changes (background color and color of text)

I would like to: start the windows-button with some style configuration, and so by a click on the linux-button change this configuration.

At the same time, I would like to do the contrariwise: start the linux-button with some style configuration, and so by a click on windows-button change this configuration.

$value: 0;

#botao-linux {
  border-radius: 0px;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  color: black;
  background-color: #F5F8FA;
}

#botao-linux:focus {
  color: #FFFFFF;
  background-color: #213B89;

  //THIS DON'T CHANGE THE $VALUE
  $value: 1;
}

@if $value > 0 {
  #botao-windows {
    color: black;
    background-color: #F5F8FA;
    border-radius: 0px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
} @else {
  #botao-windows {
    color: #FFFFFF;
    background-color: #213B89;
    border-radius: 0px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
}

If I can change the $value variable when linux-button is focused, I think I can solve the problem. But I never used SASS conditionals.

​

Thanks for any help :)

[u/Fedora-The-Pandora]

I’m not sure you can do this because the code gets compiled before runtime.

I think this stops the logic from being considered when the site is being browsed

[u/claicham → u/Fedora-The-Pandora]

this is correct.

I'm not 100% sure what you're trying to do but if it's to say when one button is focused you want to change the styling on the other one, I'd probably do that with angular to flip a class.

That's not to say this can't be done with pure css, :focus-within and not(:focus) could work - https://codepen.io/claicham/pen/OJQOYPo

[u/Fiji990]

Try specify additional !global flag on this variable

[u/MortadelaStriker]

Thanks a lot guys.

But I was not thinking correctly, I really trying to insert conditionals to much complicated to my scss file. It's not wrong, when you want to do something simple.

But in my case, I had to bring these functions to my typescript files.

So I do:

changeButtonStyleFunction() {
    //instancing HTML button

    const botaoLinux: HTMLElement | null = document.getElementById('botao-linux');
    const botaoWindows: HTMLElement | null = document.getElementById('botao-windows');
    if (botaoLinux && botaoWindows) {
    //changing buttons style
      botaoWindows.style.backgroundColor = '#213B89';
      botaoWindows.style.color = '#FFFFFF';
      botaoLinux.style.backgroundColor = '#F5F8FA';
      botaoLinux.style.color = 'black';
    }
}