CODEWITHSUNDEEP
csssassmixins
jon
jon

Reputation: 6241

Grouping SCSS (Sass) Mixins

converting some CSS to Sass, for example:

.ptn,
.pvn,
.pan{padding-top:0px !important}

to this

@mixin ptn {padding-top:0px !important}
@mixin pvn {padding-top:0px !important}
@mixin pan {padding-top:0px !important}

but wishing i could do something more like this

@mixin ptn,
@mixin pvn,
@mixin pan {padding-top:0px !important}

is something along these lines possible?

thanks!

Upvotes: 0

Views: 1637

Answers (2)

Jina Bolton
Jina Bolton

Reputation: 21

Alternatively you can use the @extend feature to be a little cleaner, depending on your purposes.

So if you have:

.ptn { padding-top:0px !important; }

You can do this anywhere else in your code (it doesn't require it to go after for scoping purposes, like mixins do):

.pvn { @extend .ptn; /* pvn-specific rules can still go here */ }

.pan { @extend .ptn; /* pan-specific rules can still go here */}

This will output as such:

.ptn, .pvn, .pan { padding-top:0px !important; }

.pvn { /* pvn-specific rules can still go here */ }

.pan { /* pan-specific rules can still go here */ }

This can be a cleaner output than using mixins, which would duplicate the code. This is particularly useful for larger blocks of code, like clear fixes. But mixins do have their place.

Speaking of things having their place… is that !important really necessary? ;-)

Upvotes: 2

Christoph
Christoph

Reputation: 51251

How about

@mixin nopadding{ padding-top:0px !important }

.ptn,
.pvn,
.pan{ @include nopadding }

? Sass is about Reusability, so try to keep the code DRY by breaking this up into a new mixin.

Additionally you could write something like this:

@mixin nopadding{ padding-top:0px !important }

@mixin anothermixin{ @include nopadding; ... }

normalselector{ @include anothermixin; }

Upvotes: 3

Related Questions