How to get parent class in Mixin

[Reg Proctor]

So I just wrote my first fist bit of SCSS and have just one question that I couldn't find the answer to in playing around with mixins. The code is below... I have no doubt it could be better, both in the SCSS and the resulting CSS, and that is fine because this is more about learning SCSS than writing the perfect code.

The code I created is below, very simple:

@mixin VAlignParent() {
  &:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
  }
  text-align: center;
}

@mixin VAlignChild() {
  display: inline-block;
  vertical-align: middle;
}

#block-views-services-block {
  .item-list {
    ul {
      list-style: none;
      li {
        float: left;
        img {

        }
        .views-field-title {
          @include VAlignParent();
          background-color: #007e39;
          width: 306px;
          height: 200px;
          h3 {
            color: white;
            font-size: 30pt;
            line-height: 100%;
            margin: 0 .25em;
            @include VAlignChild();
          }
        }
        ul {
          list-style-type: disc;
          li {
            background-color: #d7e4bd;
           
          }
        }
      }
    }
  }
}

What I would prefer is something like below (it won't work it's just to show what I am looking for). What this would allow me to do if it worked would be to have just one mixin where I can reference the object from which the mixin is being called "&", as per normal, but also reference the parent of the the object from which the mixin is being called "&&". The upshot being the mixin works without having to pass parameters and with only one mixin and no predefined variable making it perfectly generic. All the information is there for the compiler to easily be able to do this but I cannot find a way to make it work.

@mixin VAlign() {
  display: inline-block;
  vertical-align: middle;
  && {
    &:before { // In this theoretical case "&" would have a different meaning in this context to the "&" that gets implicitly passed to this mixin.
      content: '';
      display: inline-block;
      height: 100%;
      vertical-align: middle;
    }
    text-align: center;
  }
}

#block-views-services-block {
  .item-list {
    ul {
      list-style: none;
      li {
        float: left;
        img {

        }
        .views-field-title {
          background-color: #007e39;
          width: 306px;
          height: 200px;
          h3 {
            color: white;
            font-size: 30pt;
            line-height: 100%;
            margin: 0 .25em;
            @include VAlign();
          }
        }
        ul {
          list-style-type: disc;
          li {
            background-color: #d7e4bd;
          }
        }
      }
    }
  }
}

[Javier Ruiz]

You know u can pass parameters to mixins?

without giving much thinking i guess you can do someting like pass the classname to the mixing, but i think you can go for the easy solution and use instead of a mixing a class:

.VAlign{

display: inline-block;

vertical-align: middle;

.VAlignChild{

&:before {

content: '';

display: inline-block;

height: 100%;

vertical-align: middle;

}

text-align: center;

}

}

and you only need to apply the class when necesary or u can use the extend functionality.

Ciao

[Roy Tomeij]

As someone else suggested you could use a mixin that takes the child class as an argument, like so: http://sassmeister.com/gist/46b7b006e5ec9c3cc80e

Does that help?

As a side note: if your mixin doesn't take any arguments nor a @content block, you likely shouldn't be using a mixin: http://roytomeij.com/blog/2013/should-you-use-a-sass-mixin-or-extend.html