CSS 전처리 도구 SASS 요약

Sass를 사용해야할 일이 생길것 같아 미리 공부해보려고 글을 작성해봅니다.

Sass는 CSS 전처리기로 SCSS, Less, Stylus 등이 더 존재합니다. 이 CSS 전처리기들은 기존의 CSS 보다 더 나은 가독성과 유지보수를 편리하게 만들어주는 도구로 생각하면 좋습니다.

기존의 CSS는 중복될 수 있는 코드 작성이 가능하기 때문에 유지보수의 불편함이 생길 수 있습니다. 그러므로 이런 부분들을 해소시켜주는 SASS와 SCSS를 사용하면 좋습니다.

그리고 마지막에는 전처리 도구로 작성한 코드들은 CSS파일로 변환해서 사용하게 됩니다.

CSS

.wrap{
    width: 200px;
    height: 200px;
}
.wrap .inner{
    color: #fff;
    border: 1px solid #000;
}

SASS

.wrap
    width: 200px
    height: 200px
	.inner
	    color: #fff
	    border: 1px solid #000

SCSS

.wrap{
    width: 200px;
    height: 200px;
	.inner{
	    color: #fff;
	    border: 1px solid #000;
    }
}

대략 비슷해 보이지만 CSS/SASS/SCSS의 다른 점은 있습니다. 우선 SASS의 기본적인 기능들에 대해서 알아보겠습니다.

1. 변수선언

SASS의 변수 선언은 아래와 같습니다.

$main-color : #B980F0;

.box1 { 
	background-color: $main-color;
}

글로벌 변수와 로컬 변수가 있는데 괄호 안에 작성할 경우 로컬 변수라고 생각하면 된다.

2. 연산자(calc)

.wrap{
    width: 500px - 100px;
    height: (500px / 2);
}

기존 CSS에서는 calc(200px - 100px); 로 해야함

3. 선택자 중첩

.wrap{
    position: relative;
    width: 100vw;
    height: 100vh;
    
    .box{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        
        &:hover{
        	background-color: #eee;
        }
    }
}

부모 요소안에 자식 요소를 중첩해서 작성이 가능하다. 스파게티코드를 방지해줍니다. & 기호를 사용해 hover와 after/before 사용

저작자표시 비영리 변경금지

꾸생의 DevLog