How to create a condition in sass with a check for the presence of the data attribute?

Question

Sass

Is it possible to write a condition like this in sass:

if(data-name) {
  .name { display:block; }
}

In fact, I need to set a rule: if such a data-attr exists, then show me this block, and if another data-attr exists, then show me the second block.

Answer 1

Your sass compiles to css and at this stage it does not see any "blocks".
It is also impossible to make such conditions in css itself.
But you can implement this behavior by hand using selectors:

.first {display: block }
.second { display: none }

[data-name] {
  .first {display: none }
  .second { display: block }
}

This method has restrictions on the structure of the element tree, like any other css selectors.