Extending parent styles in Sass to handle component states

Say we have a text input that can be either in the valid or invalid state. If validation fails, we would like to add a red border indicating that something is wrong with the value that the user has provided. We do this by adding --error suffix to the class name.

1<!-- correct value -->2<input class="my-input" type="text" />3
4<!-- validation error (red border) -->5<input class="my-input--error" type="text" />

Using @extend directive

The @extend directive allows us to include all styles from another class and broaden them with new properties. It slightly bears a resemblance to inheritance in other languages.

1.my-input {2    font-size: 14px;3    padding: 2px 4px;4
5    &--error {6        @extend .my-input;7        border-color: red;8    }9}

It will be transpiled into:

1.my-input,2.my-input--error {3    font-size: 14px;4    padding: 2px 4px;5}6
7.my-input--error {8    border-color: red;9}

Don't use parent selector in @extend

Note that Sass won't be able to transpile your code if you try to use parent selector & in the @extend directive. The extended class name has to be provided explicitly.

1&--error {2    @extend &;3    border-color: red;4}

Sass compiler will throw an error like this:

1Error: Parent selectors aren't allowed here.2  ╷37 │         @extend &;4  │                 ^5  ╵6  index.scss 7:17  root stylesheet

Alternative approach 1: Using placeholders

You can achieve the same with placeholders. Look at the code below. We assume that all properties that the .my-input class uses are defined in the %my-input placeholder.

1%my-input {2    font-size: 14px;3    padding: 2px 4px;4}5
6.my-input {7    @extend %my-input;8
9    &--error {10        @extend %my-input;11        border-color: red;12    }13}

The transpilation result is almost the same as with the previous solution. The order of class names in the comma-separated selector differs, but it doesn't matter from the technical point of view.

1.my-input--error,2.my-input {3    font-size: 14px;4    padding: 2px 4px;5}6
7.my-input--error {8    border-color: red;9}

Additional parent properties with placeholders

Interestingly with the "placeholders" approach, you can add additional properties to the parent that won't be part of the child. Let's add a green border if the input is valid.

Consider this example:

1%my-input {2    font-size: 14px;3    padding: 2px 4px;4}5
6.my-input {7    @include %my-input;8    border-color: green;9
10    &--error {11        @include %my-input;12        border-color: red;13    }14}

It results in the CSS like below. The child does not have green border property.

1.my-input--error,2.my-input {3    font-size: 14px;4    padding: 2px 4px;5}6
7.my-input {8    border-color: green;9}10
11.my-input--error {12    border-color: red;13}

Alternative approach 2: Using @include (mixins)

Yet another way is mixins, more specifically the @include directive. Look at the code below.

1@mixin my-input {2    font-size: 14px;3    padding: 2px 4px;4}5
6.my-input {7    @include my-input;8
9    &--error {10        @include my-input;11        border-color: red;12    }13}

As a result, the Sass compiler will produce:

1.my-input {2    font-size: 14px;3    padding: 2px 4px;4}5
6.my-input--error {7    font-size: 14px;8    padding: 2px 4px;9    border-color: red;10}

Additional parent properties with mixins

The "mixins" approach lets you add properties in the same way as placeholders.

1@mixin my-input {2    font-size: 14px;3    padding: 2px 4px;4}5
6.my-input {7    @include my-input;8    border-color: green;9
10    &--error {11        @include my-input;12        border-color: red;13    }14}

As a result, we've got this:

1.my-input {2    font-size: 14px;3    padding: 2px 4px;4    border-color: green;5}6
7.my-input--error {8    font-size: 14px;9    padding: 2px 4px;10    border-color: red;11}

Conclusion

Which way to choose? For me, the first example with the @extend directive is more readable and easier to understand. Nevertheless, if you find placeholders or mixins more suitable, feel free to go with this. The placeholders are similar to mixins, but they produce more optimized CSS code. The @include directive just copies all properties to the separate blocks and results in more extensive transpilation result.