[HTML/CSS] 3-5. Sass @mixin

@mixin 예제(1)

 

@mixin ellipsis {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

p {
  width: 300px;
  @include ellipsis;
}

 

 

 

---

@mixin 예제(2)

@mixin bg-img ($bg-url, $bg-position: center, $bg-size: contain, $bg-color: transparent) {
  background-image: url($bg-url);
  background-repeat: no-repeat;
  background-position: $bg-position;
  background-size: $bg-size;
  background-color: $bg-color;
}

.bg {
  margin: 0 auto;
  width: 100px;
  height: 100px;
  @includie bg-img('https://sass-lang.com/assets/img/logos/logo-b6e1ef6e.svg', center, contain, white);
}

 

 

---