[Sass] - 재활용, 확장

Lee Jeong Min·2021년 8월 20일

Sass 네카라쿠배 패스트캠퍼스

[패스트캠퍼스 네카라쿠배 2기]

목록 보기

37/97

이 글은 패스트캠퍼스 오늘 복습으로 [프론트엔드 개발 올인원 패키지 with React Online] 강의와 HEROPY 블로그의 Sass(SCSS)완전 정복!을 보고 정리한 글입니다.

02. 문법

18. 재활용 - Mixin, Include 1

Sass Mixins는 스타일 시트 전체에서 재사용할 CSS 선언 그룹을 정의하는 기능이다.

Mixin의 사용에 있어서 두 가지만 기억하면 되는데 @mixin과 @include이다.

@mixin size ($w: 100px, $h: 100px) {
    width: $w;
    height: $h;
}

.box1 {
    @include size;
}

.box2 {
    @include size(200px, 300px);
}

.box3 {
    @include size($h: 400px);
}

.box1 {
  width: 100px;
  height: 100px;
}

.box2 {
  width: 200px;
  height: 300px;
}

.box3 {
  width: 100px;
  height: 400px;
}

@include mixin 이름으로 믹스인을 사용하는 데, 전달할 인자가 없으면 괄호 생략 가능하다. 또한 @mixin을 정의할 때 기본 값 설정도 가능하며, $h에만 따로 값을 주어 인자로 사용할 값을 알려줄 수 있다.

19. 재활용 - Mixin, Include 2

// SCSS
@mixin 믹스인이름 {
  스타일;
}

// Sass
=믹스인이름
  스타일

scss에서는 @mixin으로 선언을 하지만 sass에서는 =기호를 사용하여 믹스인 선언을 한다.

Mixin은 선택자를 포함 가능하고 상위 요소 참조(&)도 할 수 있다.

@mixin large-text {
  font: {
    size: 22px;
    weight: bold;
    family: sans-serif;
  }
  color: orange;

  &::after {
    content: "!!";
  }

  span.icon {
    background: url("/images/icon.png");
  }
}

.box1 {
    @include large-text
}

css로 컴파일된 결과

.box1 {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

.box1::after {
  content: "!!";
}

.box1 span.icon {
  background: url("/images/icon.png");
}

// SCSS
@include 믹스인이름;

// Sass
+믹스인이름

scss에서는 @include 믹스인이름으로 믹스인을 사용하지만 sass에서는 +믹스인이름으로 사용한다.

// SCSS
h1 {
  @include large-text;
}
div {
  @include large-text;
}

// Sass
h1
  +large-text
div
  +large-text

20. 재활용 - 인수

// SCSS
@mixin 믹스인이름($매개변수) {
  스타일;
}
@include 믹스인이름(인수);

// Sass
=믹스인이름($매개변수)
  스타일

+믹스인이름(인수)

믹스인 옆에 들어가는것이 매개변수이며 @include 옆에 들어가는 것이 인수이다.

21. 재활용 - 인수 - 기본값 설정

인수는 기본 값을 가질 수 있다.
@include 포함 단계에서 별도의 인수가 전달되지 않으면 기본값이 사용된다.

@mixin 믹스인이름($매개변수: 기본값) {
  스타일;
}

22. 재활용 - 인수 - 키워드 인수

매개변수의 첫 번째 부분이 아닌 다른 부분에 인수를 전달하기 위하여 사용된다.

@mixin 믹스인이름($매개변수A: 기본값, $매개변수B: 기본값) {
  스타일;
}

@include 믹스인이름($매개변수B: 인수);

단 작성하지 않은 인수가 적용될 수 있도록 기본값을 설정해 주는 것이 좋다.

23. 재활용 - 인수 - 가변 인수

입력할 인수의 개수가 불확실한 경우 가변 인수를 사용할 수 있다.

@mixin 믹스인이름($매개변수...) {
  스타일;
}

@include 믹스인이름(인수A, 인수B, 인수C);

// 인수를 순서대로 하나씩 전달 받다가, 3번째 매개변수($bg-values)는 인수의 개수에 상관없이 받음
@mixin bg($width, $height, $bg-values...) {
  width: $width;
  height: $height;
  background: $bg-values;
}

div {
  // 위의 Mixin(bg) 설정에 맞게 인수를 순서대로 전달하다가 3번째 이후부터는 개수에 상관없이 전달
  @include bg(
    100px,
    200px,
    url("/images/a.png") no-repeat 10px 20px,
    url("/images/b.png") no-repeat,
    url("/images/c.png")
  );
}

반대로 가변 인수를 전달할 값으로 사용하는 경우 다음과 같이 된다.

@mixin font(
  $style: normal,
  $weight: normal,
  $size: 16px,
  $family: sans-serif
) {
  font: {
    style: $style;
    weight: $weight;
    size: $size;
    family: $family;
  }
}
div {
  // 매개변수 순서와 개수에 맞게 전달
  $font-values: italic, bold, 16px, sans-serif;
  @include font($font-values...);
}
span {
  // 필요한 값만 키워드 인수로 변수에 담아 전달
  $font-values: (style: italic, size: 22px);
  @include font($font-values...);
}
a {
  // 필요한 값만 키워드 인수로 전달
  @include font((weight: 900, family: monospace)...);
}

가변인수로 키워드 인수를 전달할 때에는 $을 앞에 붙이지 않는다.

24. 재활용 - Content

@mixin icon ($url) {
    &::after {
        content: $url;
        @content;
    }
}

.box1 {
    @include icon("image/icon1.png");
}

.box2 {
    @include icon("image/icon2.png") {
        display: block;
        position: absolute;
        width: 100px;
        height: 100px;
    };
}

.box1::after {
  content: "image/icon1.png";
}

.box2::after {
  content: "image/icon2.png";
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
}

@content가 mixin안에 있다면 해당 부분에 원하는 스타일 블록을 전달할 수 있다.
@include하는 부분에 믹스인 이름과 인자를 적고 {}(중괄호)를 통해 적으면 된다.

25. 확장 - Extend

특정 선택자가 다른 선택자의 모든 스타일을 가져야하는 경우가 종종 있다. 이럴 경우 확장 기능을 사용할 수 있다.

.btn {
    padding: 10px;
    margin: 10px;
    background: blue;
}

.btn-danger {
    @extend .btn;
    background: red;
}

.btn, .btn-danger {
  padding: 10px;
  margin: 10px;
  background: blue;
}

.btn-danger {
  background: red;
}

26. 확장 - 추천하지 않는 이유

확장 기능의 성격으로 결과를 보면 ,로 구분하는 다중 선택자가 만들어진다. 따라서 이러한 성격은 아래와 같은 사례로 이어질 수 있다.

.container {
    width: 300px;
    height: 300px;
    background: red;
    .item {
        width: 200px;
        height: 200px;
        background: blue;
        .icon {
            width: 100px;
            height: 100px;
            background: green;
        }
    }
}

.wrapper {
    .new-icon {
        @extend .icon;
    }
}

.container {
  width: 300px;
  height: 300px;
  background: red;
}

.container .item {
  width: 200px;
  height: 200px;
  background: blue;
}

.container .item .icon, .container .item .wrapper .new-icon, .wrapper .container .item .new-icon {
  width: 100px;
  height: 100px;
  background: green;
}