How to use the & character to select the parent element? Or how to choose the parent element?

Question

Sass

The question itself lies in the problem of the symbol & as such. there is a mixin excerpt

@mixin ResponsiveImage($type) {
  @if type == content {
    max-width: 100%;
    height: auto;
  } @else if type == row {
    & {
      // Here
    }

    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
  }
}

At the moment with & there should be rules that should be applied to the parent element (to the image container).

Answer 1

Understood, if anyone needs it.

@mixin ResponsiveImage($type, $ParentClass, $ChildClass) {
  @if type == content {
    max-width: 100%;
    height: auto;
  } @else if type == row {
    .#{$ParentClass} {
      padding: 0px 0px 60% 0px;
      overflow: hidden;
      position: relative;
    }

    .#{$ChildClass} {
      width: 100%;
      height: 100%;
      object-fit: cover;
      position: absolute; 
      top: 0;
      left: 0;
    }
  }
}