@if Attribute Exists in SASS

Question

I'm trying to get something similar to this SASS code to work;

.alert-danger {
  @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
  @include transition(ease-in-out, 95ms, all);
    @if data-interaction == true {
      &:hover,
      &:focus {
        @include alert-variant-interactive($alert-danger-bg, $alert-danger-border, $alert-danger-text); 
      }
    }
}

I can't find a good way to check "if" some attribute or class exists within .alert-danger, though. I would really like to keep the hover nested, instead of having to write extra blocks.

Right now I am using data-interaction="true" on the .alert-danger element.

Thanks in advance!

You do understand that Sass is never sent to the browser, right? — cimmanon, Apr 06 '15 at 01:39
Hi there. Kind of snippy for a comment. :P But yes, I do understand it is a pre-processor for CSS. But that is my point; CSS can use attributes as a means of specifying certain elements. Can I not do so with SASS? LESS (I'm pretty sure, if I remember correctly) does have a way of doing this, despite I believe it is by utilizing less.js. So I suppose my question may be; does SASS have a sass.js or some work around to support this? — AzKai, Apr 06 '15 at 12:16
You should have asked a better question then. Sass can **only ever compile directly to CSS**. — cimmanon, Apr 06 '15 at 12:20
Yes I did see that one but it was asked 4 years ago and SASS just put out an upgrade, so I was hoping there might be a different solution. — AzKai, Apr 06 '15 at 12:21
Perhaps I should have worded it differently. ^_^ But I would very much appreciate suggestions to do so better, rather than a snippy comment telling me I am merely doing something incorrectly. Please let me know a better way of asking the question so I might change it. :) And yes, as I stated before, I understand it is a pre-processor. — AzKai, Apr 06 '15 at 12:23
You were given your answer: If you know how to do something with CSS, then that is your answer. — cimmanon, Apr 06 '15 at 12:25
As I mentioned Cimmanon, I could have written it in a different block, but that would bloat the CSS. That would be, as you said, "doing it with CSS". Instead I wanted to nest these values and pass variables, only if the element is interactive. This is different from hard-coding the CSS in the SASS file. — AzKai, Apr 06 '15 at 12:35

score 3 · Accepted Answer · answered Apr 06 '15 at 12:33

Solution I found

Happily I did find my own solution so I am posting it here in case others are having the same issue!

The code should have looked like this, instead of what was written above:

.alert-danger {
  @include alert-variant($alert-danger-bg, $alert-danger-border, $alert-danger-text);
  @include transition(ease-in-out, 95ms, all);
    &[data-interaction="true"] {
      &:hover,
      &:focus {
        @include alert-variant-interactive($alert-danger-bg, $alert-danger-border, $alert-danger-text); 
      }
    }
}

I changed the @if directive I used &[data-attribute="true"], which appends the attribute required for the nested values to compile. :)

Again, to the statements above; yes, it is a pre-processor but of course that means if CSS can do something, SASS can surely do it. All a matter of finding the right method. :)

Please don't downvote a solution that can help others simply because you are upset at a complete stranger for some unknown reason. ^_^ This may be helpful for other users with a similar issue. — AzKai, Apr 06 '15 at 12:38

@if Attribute Exists in SASS

1 Answers1

Solution I found