How to import a rule into another rule in sass?

Question

If I have this

.base {
    color:red;
}

.variation1 {
    color:red;
    border:1px solid black;
}

How can I change it to something like

.base {
    color:red;
}

.variation1 {
    import @.base
    border:1px solid black;
}

in sass? I basically don't want to repeat the base stuff, I want to import its properties.

Does anyone know?

Thanks

Answer 1

Mixin

You can create a mixin to create reusable chunks of CSS. This helps you avoid repetitive code.

I would suggest a more semantic naming system compared to the sample below.

@mixin base {
  color: red;
}

.base {
  @include base;
}

.variation1 {
  @include base;
  border:1px solid black;
}

For more information about the mixin directive check out this article on Sitepoint.

Extend

CSS Tricks elaborates nicely on the extend feature that can also be used but it's got some quirks to it.

.base {
  @include base;
}

.variation1 {
  @extend .base;
  border:1px solid black;
}

• It expands all nested selectors as well
• It cannot extend a nested selector
• You can't extend inside a media query to a selector defined outside the media query

From CSS Tricks