SASS 사용 후기

SASS 사용 후기

목차

1. 기존 CSS를 사용하던 패턴
2. SASS를 사용하게 된 계기
3. 아직 사용해보지 못한 기능
4. 참고자료

1. 기존 CSS를 사용하던 패턴

1-1. 재사용을 생각하지 않고서 그냥 만들기

div {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #fefefe;
}
div div{
    position: relative;
    width: 100px;
    height: 100px;
}

• 장점 : 의식의 흐름대로 개발을 할 수 있다.
• 단점 : 수정을 해야 하는 경우, 원하는 지점을 찾아가기 힘들다.
• 단점 : 1개의 CSS파일을 사용하는 경우 다른 페이지에도 영향을 미친다.

1-2. 재사용을 고려하여 클래스 단위를 가장 작게 만들기

.col-6{ width: 625px;}
.col-12{ width: 1250px;}
.c-black{ color: #000;}
.c-red{ color: #f00;}

• 장점 : 재사용이 용이하다.
• 단점 : 선언을 한 클래스들을 모두 파악해야 한다. (학습시간 소요)

1-3. 화면 단위별로 만들기

.template{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #ff0;
}
.template>button{
    position: relative;
    width: 100px;
    height: 50px;
}

---

2. SASS를 사용하게 된 계기

2-1. CSS의 재사용이 힘들다.

• 설계 단계에서 부터 재사용을 고려한 화면 설계가 되지 않는 다면 모든 것을 재상용 한다는 것은 힘든 일이라는 것을 알게 되었다.

2-2. 내가 현재 어느 부분을 고치고 있는지 파악하기 힘들다.

• 2번과 3번 방법을 혼용하면서 개발을 하면서 힘든점은, 집중력이 떨어질 때 어느 부분 까지 진행을 하였는지 알기가 힘들다는 것이다.
• 그래서 현재 사용하고 있는 기능은 중첩(nesting), 부모엘리먼트 참조, 변수, 연산자

$c-red: #f00;
$c-green: #0f0;

.template{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: $c-red; //변수 사용
    
    //중첩으로 사용하기
    >button{
        position: relative;
        width: 100px;
        height: 50px;
    }

    //부모 엘리먼트 참조
    &:hover{
        position: relative;
        width: 100% - 100px; //연산자 사용
        height: 100% - 100px;
        background-color: $c-green; //변수 사용    
    }
}

---

3. 아직 사용해보지 못한 기능

• 함수
• Interpolation
• Mixins
• Import

4. 참고자료

• 생활코딩 SASS
• SASS 공식문서