CODEWITHSUNDEEP
csssass
omega
omega

Reputation: 43833

How to import a rule into another rule in sass?

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

Upvotes: 7

Views: 3023

Answers (1)

Clarice Bouwer
Clarice Bouwer

Reputation: 3811

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

Upvotes: 5

Related Questions