Sass @mixin_@include

// 💻 "node-sass -w -r --source-map true styles/main.scss ./style.css"

사용법 1

🌱 main.scss
@mixin ex1 {
  color: red;
}

p {
  @include ex1;
}

---

🌿 style.css
p {
  color: red; 
}

사용법 2

🌱 main.scss
@mixin ex2() {
  color: green;
}

p {
  @include ex2();
}

---

🌿 style.css
p {
  color: green; 
}

사용법 3

🌱 main.scss
@mixin ex3($color, $width, $center) {
  width: $width;
  color: $color;
  text-align: $center;
}
p {
  @include ex3(blue, 20px, center);
}

---

🌿 style.css
p {
  width: 20px;
  color: blue;
  text-align: center; 
}

사용법 4

🌱 main.scss
@mixin ex-4($color: red, $width: 20px, $center: center) {
  width: $width;
  color: $color;
  text-align: $center;
}

p {
  @include ex_4();
}

---

🌿 style.css
p {
  width: 20px;
  color: red;
  text-align: center; 
}

💡 Fun fact:
Mixin names, like all Sass identifiers, treat hyphens and underscores as identical. This means that reset-list and reset_list both refer to the same mixin. This is a historical holdover from the very early days of Sass, when it only allowed underscores in identifier names. Once Sass added support for hyphens to match CSS’s syntax, the two were made equivalent to make migration easier.

@mixin ex-4라고 작성하고 @include에는 ex_4라고 작성 했지만 컴파일이 된다.
사용할 때 주의하자

사용법 5

🌱 main.scss
@mixin reset-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

@mixin horizontal-list {
  @include reset-list;

  li {
    display: inline-block;
    margin: {
      left: -2px;
      right: 2em;
    }
  }
}

nav ul {
  @include horizontal-list;
}

---

🌿 style.css
nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
  nav ul li {
    display: inline-block;
    margin-left: -2px;
    margin-right: 2em; }

사용법 6

🌱 main.scss
@mixin order($height, $selectors...) {
  @for $i from 0 to length($selectors) {
    #{nth($selectors, $i + 1)} {
      position: absolute;
      height: $height;
      margin-top: $i * $height;
    }
  }
}

@include order(150px, 'input.name', 'input.address', 'input.zip');

---

🌿 style.css
input.name {
  position: absolute;
  height: 150px;
  margin-top: 0px;
}

input.address {
  position: absolute;
  height: 150px;
  margin-top: 150px;
}

input.zip {
  position: absolute;
  height: 150px;
  margin-top: 300px;
}

완전 유용