Variables in SCSS

Issue

Assume I have the following SCSS file content:

#id1 .class1 {
  input {
    padding: 4px;
    border: 0px none;
    &:disabled {
      color: red;
    }
  }
}

// .... other scss settings

.class2 #id2 .class3 {
  input {
    padding: 4px;
    border: 0px none;
    &:disabled {
      color: red;
    }
  }
}

As you notice that there are repeated definition. So basically how can I do write the following pseudo-code

$var1: input {
          padding: 4px;
          border: 0px none;
          &:disabled {
            color: red;
          }
        }

#id1 .class1 {
  $var1
}

// .... other scss settings

.class2 #id2 .class3 {
  $var1
}

Is it possible to do that somehow?

Solution

What you are looking for is a @mixin:

@mixin withInputStyles() {
  input {
    padding: 4px;
    border: 0px none;
    &:disabled {
      color: red;
    }
  }
}

#id1 .class1 {
  @include withInputStyles;
}

.class2 #id2 .class3 {
  @include withInputStyles;
}

CSS output

#id1 .class1 input {
  padding: 4px;
  border: 0px none;
}
#id1 .class1 input:disabled {
  color: red;
}

.class2 #id2 .class3 input {
  padding: 4px;
  border: 0px none;
}
.class2 #id2 .class3 input:disabled {
  color: red;
}

---

If you don't want the styles to be duplicated, another possibility is to use @extend and a placeholder selector:

%inputStyles {
  input {
    padding: 4px;
    border: 0px none;
    &:disabled {
      color: red;
    }
  }
}

#id1 .class1 {
  @extend %inputStyles;
}

.class2 #id2 .class3 {
  @extend %inputStyles;
}

CSS output

.class2 #id2 .class3 input, #id1 .class1 input {
  padding: 4px;
  border: 0px none;
}
.class2 #id2 .class3 input:disabled, #id1 .class1 input:disabled {
  color: red;
}

Answered By - Arkellys