CSS-5) SCSS 기초 정리

 [Extends]

۰ python에서 사용하던 extend 메서드와 비슷하다. SCSS에서도 지정해 두고 싶은 스타일들을 선택자에 담아뒀다가, 필요할 때 해당 선택자의 스타일을 @extend를 통해 상속받아 사용할 수 있다. 쓰고 보니까 뭔가 비슷하지 않은 것 같지만, 요소를 뭉태기로 집어넣는 다는 점에서 비슷하다고 생각한다. 아래와 같이 사용할 수 있다.

-> _extends.scss 선택자들 담아두는 용도로 파일 생성

%btn {

    background-color : #fff;

    border : 1px solid #ccc;

    padding : 5px 10px;

}

-> style.scss로 돌아와서 상속 받기(import 필수!)

bottuon {

    @extend %btn;

    font-size : 15px;

}

 이게 끝이다. 매우 간단하게 사용할 수 있어서 내가 자주 사용해야 할 특정 스타일이 있다면, extend로 묶어뒀다가 상속 받아 사용하면 편하게 사용할 수 있을 것 같다.

[mixin, @content]

۰ @content는 SCSS의 mixin에서 사용되는 지시어로 mixin에서 선언된 블록을 가져와 mixin의 내용과 함께 렌더링 한다. 이를 통해 mixin의 내용을 재사용하면서 mixin의 내용을 변경할 수 있다. 사용법은 아래와 같다.

@mixin responsive($width) {

  @if $width == "768" {

    @media screen and (max-width: 768px) {

      @content;

    }

  } @else if $width =="900" {

    @media screen and (min-width: 769px) and (max-width: 900px) {

      @content;      

    }

  } @else if $width == "1080" {

    @media screen and (min-width: 901px) {

      @content;

    }

  }

}

(오... vscode에서 그냥 복붙이 된다는 걸 처음 알았다.)

 위의 코드처럼 if문을 사용해 경우에 따른 mixin을 사용할 경우 style.scss에서 @include responsive("768") 로 사용하면, 우리가 선언한 블럭들이 적용된다. 위 코드는 스크린의 width에 따라 반응형으로 변경해 보기 위해서 만들어 봤다. 위의 mixin을 활용하고 style.scss에서 해당 mixin 마다 스타일을 적용하면, 반응형 스크린이 만들어질 것이다.

 이번 주 남은 기간 동안은 공부할 시간이 거의 없을 것 같아서 글들이 짧다. 그래도 조금씩 이라도 열심히 해보자!!

"기록은 기억을 이길 수 없다" 아쟈아쟈!