CSS 전처리기 종류와 특징을 정리해보자

1. CSS전처리기란 ? Pre-Processor

CSS가 복잡해짐에 따라

CSS코드를 마치 프로그래밍 개념을 사용해 특별한 syntax를 가지고 CSS를 생성하게 하는 프로그램.

 

2. CSS전처리기 종류

• Sass (Scss) -> 문법이 조금 다르다
• Less
• Stylus

3. Sass 작성방법

• 중첩 

.header {
	width: 100%;
    	.menu{
        	font-size: 10px
        }
        .login_btn{
        	color: blue;
            &.active{
            	color: red;
            }
        }
}

• 변수설정 : $사용

$main-red-color: #eb4034;


.warning{
	font-color: $main-red-color
}

등이 있다.

 

4. LESS

CSS에 Script처럼 기능을 덧붙임, CSS의 기존 문법을 그대로 사용한다.

• 변수설정 : @사용

@main-red-color: #eb4034;


.warning{
	font-color: @main-red-color
}