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

CSS 전처리기란?

간단히 말해, CSS의 한계를 뛰어넘기 위해 개발된 새로운 형태의 CSS라고 할 수 있습니다.

1. 내가 CSS를 보다 쉽게 작성할 수 있게 
2. 다른 개발자들이 내가 작성한 CSS를 보다 쉽게 이해할 수 있게
3. CSS로는 구현 불가능한 변수 또는 함수를 사용할 수 있게  

CSS 전처리기 프레임워크의 종류

1. Sass
2. Less
3. Stylus

---

왜 전처리기를 사용해야 하나

개발적인 측면에서 유지보수성과 동일한 스타일을 적용해야하는 대상을 보다 쉽게 관리할 수 있기 때문

너무 큰 CSS파일을 수정하기에 해당하는 위치를 찾아가기가 어렵기 때문

 

 

---

CSS 전처리기 사용시 장단점

 

장점:

• CSS 코드를 여러 파일로 나눠 유지보수성이 향상
  • CSS파일도 나눌 수 있지만, CSS를 다운로드하기 위한 HTTP 요청이 다수 발생
• 중첩 선택자를 작성하기 쉬움
• 일관된 테마를 위한 변수사용. 여러 프로젝트에 걸쳐 테마 파일을 공유할 수 있음.
• 반복되는 CSS를 위한 Mixins 생성.
• Less는 자바스크립트로 작성되어, Node와 잘 작동합니다.

단점:

• 전처리기를 위한 도구가 필요, 다시 컴파일하는 시간이 느릴 수 있음
• Less에서는 변수 이름의 접두어가 @이며, @media, @import, @font-face 규칙과 같은 고유 CSS 키워드와 혼동될 여지가 있음
• Sass에서는 노드 버전을 바꿀 때 자주 다시 컴파일해야 함

---

CSS 전처리기 사용 예시

유지보수성 확보

만약 전처리자를 사용한다면, 아래처럼 스타일시트를 여러 개로 쪼개 놓더라도 최종적으로는 컴파일된 1개의 스타일시트만을 서버에서 불러오게 되므로, CSS @import의 장점은 흡수하고 단점은 피해갈 수 있습니다.

// index.scss
@import "variables" 
@import "mixins" 
@import "modules" 

@import "main/layouts" 
@import "main/theme" 

@import "sidebar/ads" 
@import "sidebar/widgets"

// less
@color-black : #000000; // 변수선언
@color-white : #ffffff; 
#header {
    color :  @color-black ; // 위에 선언한 변수를 불러온다. 
    background-color : @color-white;
}

셀렉터 중첩(연결)

CSS에서 반복해 선언해야만 했던 셀렉터(선택자)들을 한꺼번에 묶어 단순화시킬 수 있습니다.

구문이 좀 더 짧아지고, 부모 자식의 상하구조도 더욱 쉽게 파악할 수 있게 되었습니다. 

// CSS
.link { color: #1A0DAB; }
.link:hover,
.link:focus {
	text-decoration: underline;
 }
.no-hover > .link:hover,
.no-hover > .link:focus {
	text-decoration: none;
 }
.link-external::after {
	content: "^";
    margin-left: .25em;
}

// Scss 
.link {
	color: #1A0DAB;
    &:hover,
    &:focus {
    	text-decoration: underline;
        .no-hover > & { 
        	text-decoration: none;
        }
    } 
    // 선택자도 연결 가능
    &-external {
    	&::after {
        	content: "^";
            margin-left: .25em;
        }
    }
}
@mixin box ($color:blue){ //@mixin 키워드를 이용해 정의
    border : 1px solid $color;
    background-color : #fdd;
}
#box a{
  @include box //@include 키워드를 이용해 믹스인을 포함시킴
}
 

// less

@color-black : #000000;
@color-pink : #f96d9c;
@color-red : #ff0000;
@width-default : 500px;
div {
    width : @width-default;
    color : @color-black;
    h3 {
        width : @width-default;
        color : @color-pink;
        a {
            color : @color-black;
        }
    }
    h1 {
        width : 300px;
        color : @color-red;
    }    
}

.mixinEx (@pad:5px, @color-bg :#ffffff){
    padding-top: @pad;
    padding-bottom : @pad;
    padding-right : @pad;
    padding-left : @pad;
    background-color : @color-bg;
}
h3 {
    .mixinEx;
}
h2 {
    .mixinEx(10px,#000000);
}

h3 {
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 5px;
  padding-left: 5px;
  background-color: #ffffff;
}
h2 {
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
  padding-left: 10px;
  background-color: #000000;
}

 

 

---

전처리기 종류별 특징

Sass

• 가장 오래되었고, 가장 활발히 개발되고 있으며, 가장 많은 사람들이 선택한 라이브러리라 이용할거리가 많습니다.
• 막강한 내장 기능들을 갖고 있으며, Compass와 병용하면 리소스 경로를 직접 참조 가능해서, 특정 폴더 내 이미지를 모두 참조한다든가, 이미지 크기를 참조할 수도 있습니다.
• 디펜던시로서 ruby를 요구합니다. (Libsass라는 대체재 덕분에 완화되고 있지만 아직 완전하지는 않습니다.)

Less

• 브라우저에 내장된 JS 인터프리터만으로 컴파일 가능하므로 그만큼 디펜던시에서 자유롭습니다.
• Sass 다음으로 활발히 개척되고 있어서, 쓸만한 라이브러리나 mixin 구현물들을 제법 쉽게 찾을 수 있습니다.

Stylus

• 상대적으로 프로그래밍 언어의 특징을 많이 포함하고 있습니다.
• 위 특징 때문에, CSS 프로퍼티 내에서 연산자나 함수, 루프 등을 비교적 자유롭게 사용할 수 있습니다.
• 반대로 위 특징 때문에, 문법이 혼재해 있어서 처음 전처리를 시작하는 사람에게는 상대적으로 장벽이 높아 보입니다.

각 프레임워크마다 확실한 특징이 있기 때문에, 관심이 가는 것들을 조금씩 경험해 보고 나 또는 내 팀에 맞는 것을 선택해내는 것이 바람직하다고 할 수 있겠습니다.

 

[참조 1 : https://velog.io/@chris/front-end-interview-handbook-css-2#css-%EC%A0%84%EC%B2%98%EB%A6%AC%EA%B8%B0%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%A9%B4-%EC%96%B4%EB%96%A4-%EC%9E%A5%EB%8B%A8%EC%A0%90%EC%9D%B4-%EC%9E%88%EB%82%98%EC%9A%94]

[참조 2: https://findawayer.tistory.com/entry/Sass-LESS-%EB%93%B1%EC%9D%84-%EA%B6%8C%EC%9E%A5%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0]