step 1

스타일을 재활용 하는 방법

@mixin을 이용하여 재활용 스타일을 만들 수 있고

@include를 이용하여 @mixin으로 만든 속성을 재활용 할 수 있다.

// @mixin을 이용하여 재활용이 가능한 스타일 속성 만들기
// 가운데 정렬하는 함수
@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// 재활용 할경우에는 @include를 앞에 붙여줘야 한다.
.container {
    @include center;
    .item {
        @include center;
    }
}
.box {
    @include center;
}

재활용 스타일 속성에 인수를 받아서 사용하는 방법

여러개의 인수를 받을 수 있다.

키워드 인수를 이용하여 원하는 값만 변경하여 적용할 수 있다.

// 인수를 받아서 사용하는 방법
// 기본값으로 100px, tomato 지정
@mixin box($size: 100px, $color: tomato) {
    width: $size;
    height: $size;
    background-color: $color;
}
.container {
    @include box(200px, red);
    .item {
        // 키워드 인수로 지정하는 방법
        @include box($color: green);
    }
}
.box {
    @include box;
}

@maxin 에서 또다시 특정 속성을 호출하는 방법: @content

@maxin 재활용 코드안에서 @content 키워드를 이용하여 속성을 호출할 수 있다.

@mixin left-top {
    position: absolute;
    top: 0;
    left: 0;
    @content;
}

.container {
    width: 100px;
    height: 100px;
    @include left-top;
}

.box {
    width: 200px;
    height: 300px;
    @include left-top {
        bottom: 0;
        right: 0;
        margin: auto;
    }
}

SCSS 에서는 각 속성에 값을 넣어 줄때 사칙연산을 사용해서 입력할 수 있다.

이때 나누기 연산은 그냥 사용하면 단축속성과 혼돈될 수 있기 때문에 적용이 안된다.

따라서 괄호() 를 사용해서 연산을 하던가 변수를 이용해서 나누기 연산을 할 수 있다.

또한 연산을 할 때 기본적으로 단위는 같아야 한다.

서로 단위가 다를때는 calc() 함수를 이용해서 사용할 수 있다.

사칙연산 예제

calc 함수 예제

SCSS에서는 변수를 사용하여 값을 저장한 후 각 속성에 입력할 수 있다.

변수의 유효범위는 변수가 선언되어 있는 중괄호의 범위 이다.

각 변수는 재할당이 가능하다.

예제

속성을 중첩되어 사용할 수 있다.

주의점은 각 속성을 선언할때 ":" 을 붙여 줘야 하고 범위가 끝나면 ";" 을 붙여줘야 한다.

네임스페이스란 이름을 통해 구분 가능한 범위를 만들어내는 것으로 일종의 유효범위를 지정하는 방법을 말한다.

예) font-, margin-

상위 선택자를 참조하는 방법: & 기호 이용

예제

// & - 자신의 영역에 해당하는 상위 선택자 참조

.btn {
    position: absolute;
    &.active {
        color: red;
    }
}

.list {
    li {
        &:last-child {
            margin-right: 0;
        }
    }
}

.fs {
    &-small {font-size: 12px;}
    &-midium {font-size: 14px;}
    &-large {font-size: 16px;}
}

CSS로 어떻게 컴파일되는지 확인

중첩기능을 이용하여 복잡한 작업을 해야할 때 사용하기 좋다.

index.html 추가

<ul>
      <li>
        <div class="name">HELLO</div>
        <div class="age">84</div>
      </li>
    </ul>

main.scss

// 중첩 예제
.container {
  ul {
    li {
      font-size: 40px;

      .name {
        color: royalblue;
      }

      .age {
        color: orange;
      }
    }
  }
}

본인이 작성한 SCSS파일을 CSS로 바뀌는 것을 확인하는 방법

사이트: SassMeister | The Sass Playground!

자식요소로 변환하는 방법: ">" 을 추가해 준다.