何时在Sass中使用@extend和@mixin

Question

我在官方教程中学习Sass .

当我学习@mixin并且@extend,我知道它们都是用于CSS代码重用,但我无法弄清楚何时使用哪一个.对我来说有两点不同.

1. @mixin可以接受参数(但@extend不能？),这很好,它就像一个函数.
2. @extend可以使你的输出CSS包含更少的代码,就像(.message, .success, .error, .warning { })其官方教程中的输出CSS一样.

目前,我只知道,如果我想采取额外的论点,我会使用@mixin.如果我想减少输出CSS代码,我会使用@extend.除了这两个,我可以选择任何一个使用.我对么？

Answer 1

你是正确的方式.

当您希望输出根据您的调用方式改变时,您应该使用mixin.

因此,在某些情况下使用a %placeholder并且@extend会产生较少的CSS.重要的是要意识到@extend会创建关系.无论何时使用@extend,您都要在样式表的其他位置移植选择器,以便与其他正在移植的选择器共享特征.

延伸

例如

.awesome {
    width: 100%;
    height: 100%;
}

body {
    @extend .awesome;
}
p {
    @extend .awesome;
}

哪个回报:

.awesome, body, p {
    width: 100%;
    height: 100%;
}

MIXIN

@mixin awesome {
    width: 100%;
    height: 100%;
}

body {
    @include awesome;
}
p {
    @include awesome;
}

将返回:

body {
    width: 100%;
    height: 100%;
}
p {
    width: 100%;
    height: 100%;
}

但是对于mixins,您可以使用以下参数:

@mixin awesome($w: 100%, $h: 100%) {
    width: $w;
    height: $h;
}

body {
    @include awesome(960px);
}
p {
    @include awesome;
}

哪个回报:

body {
    width: 960px;
    height: 100%;
}
p {
    width: 100%;
    height: 100%;
}

希望这有用!

额外:

该@extend指令不灵活.你不能将参数传递给它,所以那里有什么.使用@extend内部@media指令也有一些限制,您无法使用不同的媒体指令扩展选择器@extend.

使用mixins的主要优点是它们具有的功能和灵活性,因为它们可以接受参数.当然,如果你想传递参数,你必须选择@mixin结束@extend.

它们是可以互换的,它还取决于你是否想要/必须坚持使用DRY CSS.

延伸

%hide-text {
  text-indent: -9999px;
  overflow: hidden;
}

.foo {
  @extend %hide-text;
}

.bar {
  @extend %hide-text;
}

.baz {
  @extend %hide-text;
}

干净整洁的结果:

.foo, .bar, .baz {
  text-indent: -9999px;
  overflow: hidden;
}

MIXIN

@mixin hide-text {
  text-indent: -9999px;
  overflow: hidden;
}

.foo {
  @include hide-text;
}

.bar {
  @include hide-text;
}

.baz {
  @include hide-text;
}

结果:

.foo {
  text-indent: -9999px;
  overflow: hidden;
}

.bar {
  text-indent: -9999px;
  overflow: hidden;
}

.baz {
  text-indent: -9999px;
  overflow: hidden;
}

你可以看到CSS选择器之间没有关系.