Группировка SCSS (Sass) Mixins

Question

конвертируя некоторые CSS в Sass, например:

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

к этому

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

, но, желая, я мог бы сделать что-то более подобное

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

возможно ли что-то подобное?

спасибо!

Answer 1

Как насчет

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

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

? Sass - это возможность многократного использования, поэтому постарайтесь сохранить код DRY , разбив его на новый миксин.

Дополнительно вы можете написать что-то вроде этого:

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

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

normalselector{ @include anothermixin; }

Answer 2

В качестве альтернативы вы можете использовать функцию @extend, чтобы быть немного чище, в зависимости от ваших целей.

Так что если у вас есть:

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

Вы можете сделать это где-нибудь еще вВаш код (он не требует, чтобы он использовался для целей определения объема, как это делают миксины):

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

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

Это будет выводить так:

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

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

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

Это может быть чищевывод, чем с помощью mixins, который будет дублировать код.Это особенно полезно для больших блоков кода, таких как прозрачные исправления.Но миксины действительно имеют свое место.

Говоря о вещах, имеющих свое место ... действительно ли это !important необходимо?; -)