CODEWITHSUNDEEP
csslesssass
sguha
sguha

Reputation: 2227

Can a mixin be a class in SCSS?

It looks like in less you can write something like

.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;        // Make inputs at least the height of their button counterpart
  .box-sizing(border-box); // Makes inputs behave like true block-level elements
}

and input-block-level can be used as either a mixin (with parentheses) and as a class if applied to elements. Is there similar functionality in scss?

(Example taken from https://github.com/twitter/bootstrap/blob/master/less/mixins.less#L154)

Upvotes: 1

Views: 168

Answers (2)

nheinrich
nheinrich

Reputation: 1841

The functionality you are describing would be achieved with @extend.

http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#extend

Here is an example from the Sass docs:

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

That being said, whether you want to use extend or mixin depends on your situation.

Upvotes: 2

Joe
Joe

Reputation: 15812

I can't answer on exact functionality but on "similar functionality"...

@mixin input-block-level {
    /* css */
}
.input-block-level {
    @include input-block-level;
}

As a guess, I'd expect that exact functionality isn't possible, due to the @mixin directive required to define a mixin.

Upvotes: 1

Related Questions