对 SCSS (Sass) Mixins 进行分组

发布于 2025-01-04 03:34:42 字数 394 浏览 1 评论 0原文

将一些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}

事情是可能的吗？

谢谢！

原文

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!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

剩余の解释 2025-01-11 03:34:42

怎么样

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

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

？
Sass 注重可重用性，因此请尝试将代码分解为新的代码，以保持代码干混合。

另外你可以写这样的东西：

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

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

normalselector{ @include anothermixin; }

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; }

回复收藏 0 原文

回梦 2025-01-11 03:34:42

或者，您可以根据您的目的使用 @extend 功能来变得更简洁。

因此，如果您有：

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

您可以在代码中的任何其他位置执行此操作（它不需要像 mixins 那样出于范围界定目的而执行此操作）：

.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 更干净的输出，后者会重复代码。这对于较大的代码块特别有用，例如明确的修复。但 mixin 确实有一席之地。

说到各有其位置……!important 真的有必要吗？ ;-)

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? ;-)

回复收藏 0 原文

~没有更多了~