LHJ

I'm a FE developer.

1. sass basic - extend

02 Nov 2020 » sass

1. sass basic - extend

scss

// extend
%boxShape {
  border-radius: 20px;
  border: 3px solid #f00;
  box-shadow: 0 3px 11px 0 rgba(0, 0, 0, .75);
}

#box1 {
  @extend %boxShape;
  &:hover {
    background-color: #ccc;
  }
}

#box2 {
  @extend %boxShape;
}

css

#box2, #box1 {
  border-radius: 20px;
  border: 3px solid #f00;
  box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.75);
}

#box1:hover {
  background-color: #ccc;
}

mixin 과 extend 의 차이점

  1. mixin은 속성은 같은데 값이 다를 때,
  2. 같은 속성과 같은 값이 여러군데 쓰일 때,