CODEWITHSUNDEEP
sasslessscss-mixins
Luca Detomi
Luca Detomi

Reputation: 5716

Mixin in SCSS (properties of a class inside another one)

In LESS I could write something like:

.foo {
    color: red;
}

.boo {
    .foo();
    background: blue;
}

To "include" properties of .foo class into .boo one.

What is the easiest and clean way to obtain a similar beaviour in SCSS?

Upvotes: 1

Views: 937

Answers (2)

Daniel Myers
Daniel Myers

Reputation: 1

you could use a placeholder, like this:

%foo {
  color: red;
}

.boo {
  @extend %foo;
  background: blue;
}

Upvotes: 0

Stephen
Stephen

Reputation: 91

How about trying like this,

mixins.scss

@mixin flex($x: center, $y: center) {
    display: flex;
    align-items: $x;
    justify-content: $y;
}

custom.scss

.classname {
    @include flex(flex-start, space-between);
    color: red;
}

Use @include

Upvotes: 1

Related Questions