[새싹x코딩온] 웹 개발자 부트캠프 과정 14주차 회고 | Sass

 

1. 들어가며

• Sass 를 이용해서 React 프로젝트 스타일링 하기

2. Sass

Sass는 css 전처리기 중 하나다.

재활용성, 코드의 가독성을 높여주고 유지보수를 더 쉽게 해준다.

확장자는 .scss 와 .sass 두개가 있는데, scss 는 css 와 거의 비슷한 문법으로 중괄호{} 와 세미콜론 (;)을 사용한다.

그래서 이 포스팅에서는 좀 더 사용하기 쉬운 scss 문법을 이용하고자 한다.

scss에 대한 자세한 문법은 

이전 포스팅인 https://daddda3232.tistory.com/18 를 참고하거나  reference에 있는 https://www.heropy.dev/p/Y7OrPe 여기를 참고하길 바람

 

SCSS를 이용해서 간단한 스타일링 하기

 

이전에는 단순히 css 만 사용해서 일괄적으로 스타일링이 적용되어 있는데

scss 를 사용해서 캐릭터마다 각각 다른 배경으로 표현해보고자 한다.

 

이전 스타일

 

.villager-list {
  list-style: none;
  display: flex;
  max-width: 500px;
  flex-wrap: wrap;
  margin: 0 auto;
  gap : 0 10px;
}

.villager-list li {
  width: 80px;
  cursor: pointer;
}

.villager-list figure, .villager-list img {
  width: 100%;
  margin: 0;
}

.villager-list figure {
  overflow: hidden;
  border-radius: 50%;
  background-color: rgb(240, 228, 212);
  border : 5px solid burlywood;
  box-sizing: border-box;
}

.villager-list p{
  text-align: center;
  font-weight: bold;
}

.info figure {
  height: 200px;
}

.info img {
  height: 100%;
}

 

SCSS 적용

scss로 스타일링

.villager-list {
    list-style: none;
    display: flex;
    max-width: 500px;
    flex-wrap: wrap;
    margin: 0 auto;
    gap : 0 10px;
    .villager {
        width: 80px;
        cursor: pointer;
        @each $name, $bgcolor, $color in $villagers {
            &.#{$name} {
                .villager-img {
                    width: 100%;
                    overflow: hidden;
                    border : 1px solid transparent;
                    box-sizing: border-box;
                    @include listStyle($bgcolor, 50%);                    
                    margin: 0;
                    .img {
                        width: 100%;
                        margin: 0;
                    }
                }
                .villager-name {
                    text-align: center;
                    font-weight: 300;
                    font-size: 20px;
                    color : $color;
                    padding : 5px 10px;
                    @include listStyle($bgcolor, 20px);
                    &:hover {
                        box-shadow: 1px 1px 5px 1px #ccc;
                    }
                }
            }
        }
    }
}

.villager-info {
    .villager-img {
        height: 200px;
        img {
            height: 100%;
        }
    }
}

여기서 각 캐릭터마다 배경화면과 이름색을 다르게 해주기 위해서

$villagers 라는 변수를 만들었다.

그 안에 넣을 정보에 대한 것을 배열처럼 저장해두고 @each문을 사용했다.

@each 문은 list와 map 데이터를 반복할 때 사용하는 것으로 for in문과 유사하다.

@each $변수 in 데이터 {
	// 반복할 내용
}

배열데이터에 있는 갯수만큼 돌아주는 forEach문 처럼 (혹은 for in문) @each 도 데이터에 있는 변수의 갯수만큼 반복하며

css 스타일을 한다. 

index가 필요하면 index() 로 넣어주면 된다.

$size : (100px, 200px, 300px);

ul {
    @each $s in $size {
        $i : index($size, $s);
        li:nth-child(#{$i}) {
            width: $s;
            height: $s;
            background-color: pink;
        }
    }
}

 

css를 하다보면 가끔 단순 노가다를 하는 기분이 드는데 @each를 쓰면 좀 더 빠르고 효율적으로 할 수 있을 거 같다.

 

 

참고로 https://sass-lang.com/playground/ 이 사이트에 가게 되면 scss나 sass 확장자로 작성한 코드를 css 확장자로 컴파일해서  css 로 어떻게 표현하는지 볼 수가 있는데, 위에서 썼던 코드를 가져다가 css로 컴파일해보았다.

 

scss 로 작성한 코드는 65줄인데 css로 컴파일된 것은 269줄이다.

아무래도 scss에는 변수, 함수, 반복문, 조건문 같은 것을 써서 좀 더 효율적이고 작성할 수 있지만

css는 그게 아니라서 그런 것 같다. 

 

 

 

3. 마치며

css 전처리기 중 하나인 sass 에 대해 알아보았다.

위에서도 말했지만 css 전처리기 에서는 변수, 함수, 반복문, 조건문  등등을 써서 효율적이고 유지보수성이 향상되는 것 같다. 그래서 처음 익히기는 어렵지만 쓰다보면 좀 덜 노다가를 하고 좀 덜 하드코딩하는 느낌이 들고 뭔가 개발자 스러움??? 이 느껴지는 도구인 것같다.

수업시간에는 3가지에 대해서 배웠지만 배웠던 것 중에는 sass 가 가장 편하다.(그래서 많이 쓰이나보다)

다만 전처리기를 사용하면 패키지를 따로 설치해야 하고, 컴파일 하는 시간이 느려질 수 있다고 하니 주의해서 사용해야겠다. 

 

4. Reference

1. 코딩온 강의 교안 및 실습

 

2. https://www.heropy.dev/p/Y7OrPe

SCSS/Sass 완벽 가이드

3.  https://sass-lang.com/playground/

Sass: Playground

4. https://fathory.tistory.com/30

CSS 전처리기의 종류와 장단점