Generated by SassMeister.com.

SassMeister-input-HTML.html

<section class="some">
  <p class="some__element">Hello</p>
</section>

SassMeister-input.scss

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

.some {
  &__element {
    font-size: 3rem;
    
    display: flex;
    
    width: 200px;
    height: 200px;
    
    text-align: center;
    
    box-shadow: 0 0 5px;
    
    justify-content: center;
    align-items: center;
    
    @at-root .no-boxshadow & {
      border: 1px solid black;
    }
    @at-root .no-flexbox & {
      display: table-cell;
      vertical-align: middle;
    }
  }
}

SassMeister-output.css

.some__element {
  font-size: 3rem;
  display: flex;
  width: 200px;
  height: 200px;
  text-align: center;
  box-shadow: 0 0 5px;
  justify-content: center;
  align-items: center;
}
.no-boxshadow .some__element {
  border: 1px solid black;
}
.no-flexbox .some__element {
  display: table-cell;
  vertical-align: middle;
}

SassMeister-rendered.html

<section class="some">
  <p class="some__element">Hello</p>
</section>