Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

// Crear la clases y poner un borde en color RGBA. 

$infraestructura: #cca2fc;
$salud: #2bfda6;
$educacion: #88ffff;


$ejes: (salud, $salud), (educacion, $infraestructura), (infraestructura, $infraestructura);

@each $eje, $color in $ejes {
  .#{$eje} {
    border: none;
    &::before {
      border: 1px solid rgba($color,1);
    }
    &:hover::before, &:focus::before {
        border: 3px solid rgba($color,1);
    }
  }
}

SassMeister-output.css

.salud {
  border: none;
}

.salud::before {
  border: 1px solid #2bfda6;
}

.salud:hover::before, .salud:focus::before {
  border: 3px solid #2bfda6;
}

.educacion {
  border: none;
}

.educacion::before {
  border: 1px solid #cca2fc;
}

.educacion:hover::before, .educacion:focus::before {
  border: 3px solid #cca2fc;
}

.infraestructura {
  border: none;
}

.infraestructura::before {
  border: 1px solid #cca2fc;
}

.infraestructura:hover::before, .infraestructura:focus::before {
  border: 3px solid #cca2fc;
}