[포스코x코딩온] 웹개발자 입문 과정 9주차 | Sass

1.Sass란?

 Syntactically Awesome Style sheets의 약자로,

 CSS 전처리기를 이용해서 복잡한 작업을 보다 쉽게 한다.

 CSS 전처리기란? 자신만의 특별한 문법을 가지고 CSS를 생성하는

 프로그램으로, 변수, 함수 개념을 사용하여 재활용성과 가독성을 높인다.

 

 가.확장자 종류

• .sass:  세미 콜론(;)과 중괄호({})를 사용하지 않고 탭(tab)을 이용해서 스타일을 정의한다.
• .scss: 기존의 .css파일과 비슷한 문법을 이용하지만 부모 { 자식{}} 관계로 상하관계를 표현가능하다. 또한 sass보다 더 넓은 범용성과 css와의 호환성이 좋기 때문에 아래에서 scss를 사용하는 방법을 소개하고자 한다.

 나.설치 방법

  버전 문제로 인해 npm install node-sass에서 계속 에러가 발생했다.

  그래서 npm install sass로 설치해서 사용했다.

2.특징

 아래와 같은 .scss의 특징을 통해 더 자세히 사용법을 알아보자.

 가. 중첩 가능 (nesting)

  개인적으로 css보다 더 편리하다고 느꼈던 특징 No1이다.

  css만을 사용했을 때 클래스의 상하관계 파악이 어려워서 

  매번 확인해야하는 불편함이 있었는데, 이를 더 확인하기 쉽고

  유지보수하기 편리하게 만들어주는 기능이 바로 이 중첩기능이다.

 

  즉, 요소간 부모 자식(상하 관계 표현이 쉽다.)

 

  예시

.SassComponent {
  margin-top: 30px;
  display: flex;
  background-color: rgb(204, 204, 204);

  .box {
    width: 100px;
    height: 100px;
    border: 1px solid black;
    }
}

 

나.& 선택자 사용 가능

  부모 선택자를 참조하여 &로 치환 가능하다.

 

  예시

.box {
    &:hover {
      //.box:hover와 동일함
      $box-animation: $animation-duration * 2; //0.8
      cursor: pointer;
      transform: translateY(-20px);
      transition: transform $box-animation;
    }

 

 다.$변수 선언

  _utils.scss파일을 따로 생성해서 변수를 지정하고, 불러올 수 있다.

 

  예시

• _utils.scss

// _utils.scss
// 변수, mixin들을 정의헤 놓는 파일
// 파일명 앞에 _기호를 붙이는 이유?
// : 변수, mixin만을 저장해놓을 파일이기 때문에
// 별도의 표준 css로 변환(컴파일)될 필요가 없음
// 성능/관리 측면에서 이득을 취할 수 있음

//COLOR 변수
$color-red: red;
$color-orange: orange;
$color-yellow: yellow;

• test.scss

@import "./_utils.scss";  //import 필수 

.red {
    background-color: $color-red; //변수 사용
}

 

 라.mixin 사용 (= 함수)

  mixin을 지정해서 동일한 작업을 반복할 필요없이 재사용 가능하다.

 

   1) 기본 사용 방법

   예시

• mixin 정의 방법

//믹스인을 정의할 때 ; @mixin 키워드
//믹스인을 사용할 때: @include 키워드
@mixin box($size) {
  width: $size;
  height: $size;
}

• mixin 사용 방법

.box {
    //[mixin 사용 전]
    // width: 100px;
    // height: 100px;
    // border: 1px solid black;

    //[mixin 사용 후]
    @include box(100px);
}

 

   2)애니메이션 mixin 사용 방법

• mixin 정의 방법

@mixin animation-rotate($ani-name, $size) {
  @keyframes #{$ani-name} {
    0% {
      top: 0;
      left: 0;
    }
    25% {
      top: 0;
      left: $size;
    }

    50% {
      top: $size;
      left: $size;
    }

    75% {
      top: $size;
      left: 0;
    }

    100% {
      top: 0;
      left: 0;
    }
  }
}

• mixin 사용 방법

.circle {
  position: relative; //top left right bottom 사용 가능
  animation-duration: 2s;
  animation-iteration-count: infinite;

  &.pink {
    @include animation-rotate(pinkAnim, 100px);
    animation-name: pinkAnim;
  }
  &.yellow {
    @include animation-rotate(yellowAnim, 200px);
    animation-name: yellowAnim;
  }
  &.green {
    @include animation-rotate(greenAnim, 300px);
    animation-name: greenAnim;
  }
}

 

마.반응형 - @include

 @include media를 사용하지 않고 이전의 반응형을 만드는 방식은 아래와 같다.

@media (max-width:#{$breakpoint-tablet} ) {
    .SassComponent {
     	flex-direction: column;
    }
}

 그러나 @include media를 사용한다면 더 쉽게 반응형 구현이 가능하다.

 아래에서 @include media방법을 배워보자.

   1) 기본 사용 방법

    npm i include-media로 모듈을 설치해서 @include media를 사용해보자.

@import "~include-media/dist/include-media"; //import

@include media("<#{$breakpoint-tablet}") {
  // @include media("<758px") {
  .SassComponent {
    flex-direction: column;
  }
}

 

   2)breakpoint 마다 이미지 개수 지정하기

    만약 5개의 이미지를 가지고 있고 768px 이하에서는 3개만,

    532px 이하에서는 1개만 보이고자 할 때 아래와 같이 코드를 작성하면 된다.

 

@import "~include-media/dist/include-media";

//breakpoint  변수 선언
$breakpoint-md: 768px;
$breakpoint-sm: 570px;

•  방법 1: flex 이용

 .Prob4 {
   display: flex;
   div {
     width: 20%;
     img {
       width: 100%;
       aspect-ratio: 1/1; //css 이미지 비율: 종횡비 가로세로 비율 지정
       object-fit: cover; //원본 비율 유지
     }
   }
 }

 @include media("<#{$breakpoint-md}") {
   .Prob4 {
     flex-wrap: wrap;
     div {
       width: 33.3%;
     }
   }
 }
 @include media("<#{$breakpoint-sm}") {
   .Prob4 {
     flex-wrap: wrap;
     div {
       width: 100%;
     }
   }
 }

• 방법2: 그리드 이용

//잘쓰이지는 않지만 안쓰이지는 않음
.Prob4 {
  display: grid; //부모요소에 줘야함
  //부모(컨테이너) 요소에 속성 주기
  //표 - 행을 어떻게 배치할지
  //지금은 사진 5개를 나란히 배열하므로 아래 같이 작성

  //grid-template-column 사용 방법
  //grid-template-columns: 1fr 2fr 1fr 2fr 1fr;
  //grid-template-columns: 100px 200px 100px 200px 100px;
  //grid-template-columns: 300px 2fr 1fr 2fr 1fr;

  //가로에 대해서 1:1:1:1:1 비율
  //grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  //위 코드와 동일함
  grid-template-columns: repeat(5, 1fr);
  div {
    width: 100%;
    img {
      width: 100%;
      aspect-ratio: 1 /1;
      object-fit: cover;
    }
  }
}
@include media("<#{$breakpoint-md}") {
  .Prob4 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@include media("<#{$breakpoint-sm}") {
  .Prob4 {
    //방법 1
    // grid-template-columns: repeat(1, 1fr);
    //방법 2 위 코드와 동일하게 동작됨
    display: block;
  }
}