[SCSS] Reuse Styles with the SCSS @extend Directive-优快云博客

本文探讨了SCSS中@extend与@mixin指令的不同之处，包括它们如何改变源代码顺序、维护元素间的关系、继承特性、接受参数等方面的能力。此外，还通过示例展示了如何使用这些指令来编写可复用的样式。

We can write reusable styles with the SCSS @extend or @mixin directives. Which one is better? It depends. A better question is, how do they differ?
Extends:
change the source order, mixins don’t.
maintain relationships, mixins don’t.
share inherited traits, mixins don’t.
can extend multiple classes, mixins don’t.
can create multiple class declarations in the compiled CSS, mixins don’t.
can use the placeholder selector, mixins don’t.

Mixins:
can accept arguments, extends don’t.
can pass additional content, extends don’t.
repeat code when compiled, extends group class names together.
work well wIth media queries, extends have a limited interaction wIth media queries.

In this lesson we learn about writing reusable styles with the @extend directive and how it compares to the @mixin directive.

.base {
  color: red;

  &:hover {color: green}
  &::after {content: "?"}

  &-stuff {height: 5rem} // this will not be extended
}

.cool {height: 20rem}

.new {
  width: 20px;
  // extend multi classes
  @extend .base, .cool;
}

/*
 It is possible to use placeholder
*/

%base {
  color: red;
}

.new2 {
  @extend %base;
}

/*
  Placeholder for extend with mixin
*/
%hero {background: linear-gradient(red, white, black)}
%villain {background: darkred}

@mixin character($type: hero) {
  height: 20px;
  width: 20px;

  @extend %#{$type} // #{} --> output a string
}

.doc-ock {@include character(villain)}


/*
  Works with media query
*/
@media screen and (min-width: 800px) {
  %buddy { color: purple; }
}

@media screen and (min-width: 800px) {
  .buddy {
    @extend %buddy;
  }
}