Ejemplo sass

ejemplo-compilado.css

/* variables si se ve al momento de compilar */
/* generales */
body {
  color: #ff0;
  background-color: white;
  font-size: 60px;
}

.rectangulo {
  border: 1px solid #ff0;
  padding: 60px;
  margin-bottom: 60px;
  width: 60px;
  height: calc(100vh - 60px);
}
.rectangulo .link {
  /* <div class="rectangulo"><a class="link"> */
  color: white;
}
.rectangulo.borde-rojo {
  /* <div class="rectangulo borde-rojo"> */
  border-color: #f00;
}

.cuadrado {
  border: 1px solid #ff0;
  padding: 60px;
  margin-bottom: 60px;
  width: 60px;
  height: 60px;
}

ejemplo-sin-compilar.scss

// variables no se ve
/* variables si se ve al momento de compilar */
$color1: #ff0; //fuchsia;
$color2: white;
$size: 60px;

// Mixins 
@mixin borde {
    border: 1px solid $color1; 
    padding: $size;
    margin-bottom: $size;
}

/* generales */
body {
    color: $color1;
    background-color: $color2;
    font-size: $size;
}
.rectangulo {
    @include borde;
    width: $size;
    height: calc(100vh - #{$size});
    //height: calc(#{$size} * 4); //$size*2;
    .link {
        /* <div class="rectangulo"><a class="link"> */
        color: $color2;
    }
    &.borde-rojo { 
        /* <div class="rectangulo borde-rojo"> */
        border-color: #f00;
    }
}
.cuadrado {
    @include borde;
    width: $size;
    height: $size;
}
//@import 'estilo.css';