Walter White Walter White - 1 month ago 7
Sass (Sass) Question

SASS proper syntax for function that will add selectors to element

How can I apply to my

#demo
element my
actions
function?
I tried this code but it doesn't work and I cannot find a proper syntax for this.

Function:

=actions($element)
#{element}:hover
opacity: 0.8

#{element}:active
opacity: 0.4


Element:

#demo
backgroud: red

+actions(&)


This should compile to something like this:

#demo
background:red

#demo:hover
opacity: 0.8

#demo:active
opacity: 0.4

Answer

First mistake you made was during the interpolation, you missed the $

You wrote #{element}:hover instead of #{$element}:hover

This is what your function should look like

=actions($element)
  @at-root
    #{$element}:hover
      opacity: 0.8

    #{$element}:active
      opacity: 0.4

#demo
  backgroud: red
  +actions(&)

Which compiles to the following css

#demo {
  backgroud: red;
}
#demo:hover {
  opacity: 0.8;
}
#demo:active {
  opacity: 0.4;
}

Without the @at-root directive you would end up with css that looks like this

#demo #demo:hover {
  opacity: 0.8;
}