Generated by SassMeister.com.

SassMeister-input-HTML.html

<input type="text" class="input" placeholder="Put text in me"/>
<input type="text" class="error-input" placeholder="Something went wrong!"/>

SassMeister-input.scss

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

%input-style {
  border-radius: 3px;
  color: #555;
  font-size: 17px;
  padding: 10px 20px;
  display: inline-block;
  outline: 0;
}

.input {
  @extend %input-style;
  border: 4px solid #ddd;
}

.error-input {
  @extend %input-style;
  border:4px solid #e74c3c;
}

body {
  text-align: center;
  padding-top: 100px;
}

SassMeister-output.css

.input, .error-input {
  border-radius: 3px;
  color: #555;
  font-size: 17px;
  padding: 10px 20px;
  display: inline-block;
  outline: 0;
}

.input {
  border: 4px solid #ddd;
}

.error-input {
  border: 4px solid #e74c3c;
}

body {
  text-align: center;
  padding-top: 100px;
}

SassMeister-rendered.html

<input type="text" class="input" placeholder="Put text in me"/>
<input type="text" class="error-input" placeholder="Something went wrong!"/>