[CSS] CSS 전처리기(Sass)

CSS 전처리기란?

• 별도의 문법을 가지고 있으며, CSS 파일을 생성하는 프로그램을 말한다.
• CSS에서 제공하지 않는 기능들을 제공하여 CSS작성을 더욱 편리하게 도와준다.
• 여기서 배우게 될 Scss 외에도 LESS, Stylus 등 다양한 CSS 전처리기가 있다.

컴파일

• Scss 문법에 따라 하이라이팅 및 포매팅 기능을 제공하는 확장 기능 Sass부터 설치한다.
• .scss 확장자로 스타일에 대한 정의를 한 후 이를 .css 파일로 변환하는 과정이 필요한데 이를 컴파일 이라고 한다.
  => 여기서는 live sass complier라는 VS code 확장 기능을 활용한다.

1. VS Code 확장기능에서 Sass 검색 후 설치
   

2-1. VS Code 확장기능에서 Live Sass Compiler 검색 후 설치

2-2. 컴파일되는 경로 지정

• 파일 > 기본설정 > 설정 > Live Sass Compiler에서 settings.json 파일 열어서 다음 코드 추가.
  => 컴파일이 실행되는 폴더의 상위 폴더에 css 폴더(없다면 생성 후) 내에 파일 생성.

"liveSassCompile.settings.formats": [
    {
      "format": "expanded", 
      "extensionName": ".css", // 확장자 지정
      "savePath": "~/../css"   // 컴파일되는 경로 지정
    }
  ]

Scss 문법

• 기본적으로 CSS 문법과 유사하나 추가적인 기능을 제공한다.

1. 중첩 선택자

• {} 안에 선택자를 작성하면 자식요소를 나타낸다.
• 다음 index.scss가 CSS로 컴파일된 결과

.container {
	display : flex;
	.box {
    	width : 100px;
        height : 100px;
        p {
        	font-size : 24px;
        }
	}
}

• 컴파일 결과

.container {
	display : flex;
}

.container .box {
	width : 100px;
    height : 100px;
}

.container .box p {
	font-size : 24px;
}

2. 상위 요소 선택자 &

• {} 안에서 &를 사용하면 상위 요소를 가르킨다.

.container {
	display : flex;
    /* .container에 hover 시 */	
    &:hover { 
    	background : #e8e8e8;
        /* .container에 hover시 .box 요소 */
        .box {
        	background : blue;
        }
    }
    .box {
    	width: 100px;
        height : 100px;
        background : aqua;
    }
}

• 컴파일 결과

.container {
	display : flex;
}

.container:hover {
	background : #e8e8e8;
}

.container:hover .box {
	background : blue;
}

.container .box {
	width: 100px;
    height: 100px;
    background : aqua;
}

3. 변수 $

• $변수명의 형태로 작성하여 변수에 값을 저장하고 참조할 수 있다.
  => 참조를 할 때도 $변수명의 형태로 참조한다.
• 특정 요소 안에서 선언시 범위가 그 요소로 한정된다.

/* 전역에 $main_color라는 변수 선언 */
$main_color : #00eb00;

h1 {
	/* 전역에 선언된 $main_color 변수 참조 */
	color : $main_color;
    /* h1 요소에서만 참조 가능한 $title_size 변수 선언 */
   	$title_size : 24px;
    font-size : $title_size;
}

p {
	/* 위에서 선언한 $title_title 변수는 h1 내에서만 참조 가능하기 때문에 에러 발생 */
	font-size : $title_size;
}

4. 스타일을 미리 지정하는 @mixin과 재사용하는 @include

/* button에 대한 스타일을 미리 지정*/
@mixin button {
	display: block;
    padding : 5px 10px;
    border: 1px solid black;
    border-radius : 4px;
    cursor : pointer;
}

/* @minxin button에 지정한 스타일을 포함 */
.btnSlide {
	@include button;
}

• 컴파일 결과

.btnSlide {
	display: block;
    padding : 5px 10px;
    border: 1px solid black;
    border-radius : 4px;
    cursor : pointer;
}

• 매개변수를 통해 사용되는 시점에 따라 다른 값을 사용할 수 있다.
• $매개변수 : 기본값을 통해 인자가 전달되지 않았을 때의 기본값을 지정할 수 있다.
  => 선택적으로 인자를 전달할 때에는 $변수 : 값의 형태로 전달한다.

/* button에 대한 스타일을 미리 지정*/
@mixin button($color : red, @radius) {
	display: block;
    padding : 5px 10px;
    border: 1px solid $color;
    border-radius : @radius;
    cursor : pointer;
}

.btnSlide {
	@include button(black, 8px)
}

.btnSubmit {
	/* $color의 인자를 전달하지 않아 기본값인 red 지정 */
	@include button($raduis : 4px);
}

• 컴파일 결과

.btnSlide {
	display: block;
    padding : 5px 10px;
    border: 1px solid black;
    border-radius : 8px;
    cursor : pointer;
}

.btnSubmit {
	display: block;
    padding : 5px 10px;
    border: 1px solid red;   /* $color의 인자를 전달하지 않아 기본값인 red 지정 */
    border-radius : 4px;
    cursor : pointer;
}