LHJ

I'm a FE developer.

1. sass basic - mixin

02 Nov 2020 » sass

1. sass basic - mixin

여러가지 css 속성들을 하나의 그룹으로 묶어서 여러곳에서 재사용하게 할 수 있는 sass의 mixin이라는 기능에대해 알아보도록 하겠다.

scss

// mixin
@mixin fontSizeBgColor($fontSize: 20px, $bgColor: #fff) {
  font-size: $fontSize;
  background-color: $bgColor;
}

@mixin linkStyle($textColor: #222, $textDeco: none) {
  color: $textColor;
  text-decoration: $textDeco;
}

#box1 {
  @include fontSizeBgColor(40px, #ffcccc);
  & > a {
    @include linkStyle(#ee6633);
  }
}

#box2 {
  @include fontSizeBgColor();
  & > a {
    @include linkStyle(#a22, none);
    &:hover {
      @include linkStyle(#000, underline);
    }
  }
}

css

#box1 {
  font-size: 40px;
  background-color: #ffcccc;
}
#box1 > a {
  color: #ee6633;
  text-decoration: none;
}

#box2 {
  font-size: 20px;
  background-color: #fff;
}
#box2 > a {
  color: #a22;
  text-decoration: none;
}
#box2 > a:hover {
  color: #000;
  text-decoration: underline;
}