CSS를 SASS의 한 종류인 Sass로 바꿔보기

기존에는 css로 레이아웃을 짜주었는데

css는 문법이 어려워 여러기능을 사용할 때 어려움이 있어 scss라는 문법이 나왔고

이 문법을 바꿔주기 위해 scss라는 파일 전처리기를 이용해 브라우저에게 css로 변환하여 보여준다.

 

이번에는 기존에 작업하던것에 scss를 적용해보려고 한다.

---

[과제 2] 기존의 css 파일을 scss로 변경하고 그에 맞게 수정하기

variables.scss 파일과 mixin.scss 파일을 생성해주세요

variables.scss에 black, red, green의 색을 담는 변수를 만들어주세요

mixin.scss에는 두 개의 mixin을 만들어주세요

(flexCenter : 가운데 정렬, textStyle : font의 size와 weight를 인자로 넣으면 적용)

Assignment 2-1에서 구현했던 introduce.css를 sass로 변환하고 nesting 을 적용해주세요

introduce.scss에 variables.scss, mixin.scss에 만들어둔 변수와 mixin을 적용해주세요

sass의 부모선택자 (&)와 hover를 사용해서 아래 예시 영상과 같은 동작을 하도록 구현해주세요

---

variables.scss 파일은 변수로 만들어둔 css 속성들만 모아둔 파일이고

mixin.scss 파일은 mixin 기능을 쓴 css 속성들만 모아둔 파일이다.

 

먼저 variables.scss에서 변수를 만들어보았다.

$black: black;
$red: red;
$green: green;

mixin.scss에서 flexCenter와 textStyle를 만들어주었다.

이때 size, weight 등의 숫자가 들어갈 수 있는 값은

lighter같은 속성보다 숫자 자체를 명시하는 것이 디자이너와 소통하기 좋다고 하셨다.

color의 경우는 헥사나 rgb등이 좋다고 하셨다.

@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin textStyle($size, $weight) {
  font-size: $size;
  font-weight: $weight;
}

 

이 파일에서 사용할 variables.scss 파일과 mixin.scss 파일을 import 해주고

@import "../../style/variables.scss";
@import "../../style/mixin.scss";

기존에는 class이름:hover{}로 썼던 것을 (&)와 hover를 사용해서 더 간단하게 만들어준다.

.name {
        &:hover {
          color: $green;
        }
        
//기존 방법
.name {
 color :white;
}
.name:hover {
 color: $green;
}

적용하면 우리가 알던 hover가 잘 작동하는 것을 볼 수 있다.

마지막으로 css파일을 scss로 확장자를 변경해주고 nesting을 진행했다.

간단하게 생각하면 제일 상위인 introduce class 안으로 다른 class 들이 속하게 만들어주면 된다.

만약에 a class가 부모고 b,c class가 자식이라면 a class 안으로 b, c를 넣어주면 되고

b class 안에 d class가 있다면 똑같이 b 안에 d를 넣어주면 된다. 

 

그리고 introduce.scss에 variables.scss, mixin.scss에 만들어둔 변수와 mixin을 적용해준다.

.introduce {
  height: 100vh;
  @include flexCenter;
  .container {
    border: solid 1px gray;
    border-radius: 5px;
    width: 300px;
    height: 400px;
    padding: 10px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;

    .photo {
      width: 300px;
      height: 300px;
      border: solid 0px;
      border-radius: 5px;
    }
    .letters {
      display: flex;
      flex-direction: column;

      p {
        margin: 0px;
      }
      .name {
        &:hover {
          color: $green;
        }
      }
      .number {
        color: gray;
        @include textStyle(100px, 10px);
      }
    }
  }
}

아래는 전체 코드이다.

@import "../../style/variables.scss";
@import "../../style/mixin.scss";

.introduce {
  height: 100vh;
  @include flexCenter;
  .container {
    border: solid 1px gray;
    border-radius: 5px;
    width: 300px;
    height: 400px;
    padding: 10px;
    margin: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;

    .photo {
      width: 300px;
      height: 300px;
      border: solid 0px;
      border-radius: 5px;
    }
    .letters {
      display: flex;
      flex-direction: column;

      p {
        margin: 0px;
      }
      .name {
        &:hover {
          color: $green;
        }
      }
      .number {
        color: gray;
        @include textStyle(100px, 10px);
      }
    }
  }
}