Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="block">
  <div  class="element">one</div>
  <div  class="element">two</div>
  <span class="element">three</span>
  <div  class="element">four</div>
</div>

SassMeister-input.scss

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

* {
 
 box-sizing: border-box; 
  
}

.block {
 
 display: table;
 width: 100%;
 padding: 0;
 
 & + & {
   
   padding: 1em;
   
 }
  
  @at-root div {
    
    border: 10px white solid;
    display: table-cell;
    background: hotpink;
    text-align: center;
    padding: 10px;
    
    & + div {
      
      opacity: 0.5;
      
    }
    
    & ~ div {
      
      color: white;
      
    }
    
  }
  
}

li ~ span {
  
  color: red;
  
}

SassMeister-output.css

* {
  box-sizing: border-box;
}

.block {
  display: table;
  width: 100%;
  padding: 0;
}
.block + .block {
  padding: 1em;
}
div {
  border: 10px white solid;
  display: table-cell;
  background: hotpink;
  text-align: center;
  padding: 10px;
}
div + div {
  opacity: 0.5;
}
div ~ div {
  color: white;
}

li ~ span {
  color: red;
}

SassMeister-rendered.html

<div class="block">
  <div  class="element">one</div>
  <div  class="element">two</div>
  <span class="element">three</span>
  <div  class="element">four</div>
</div>