CSS를 효율적으로 사전 처리하세요!

반응형

CSS 전처리는 전처리의 고유한 구문에서 CSS를 생성할 수 있는 프로그램입니다. 이 문법은 사용자가 CSS 코드에서 변수, 중첩, 상속, 믹스인, 함수, 수학적 연산과 같은 논리를 사용할 수 있게 한다. 또한 반복 작업을 쉽게 자동화하고 오류와 코드 블롯을 줄이며 재사용 가능한 코드 스니펫을 생성하고 이전 버전과의 호환성을 보장할 수 있습니다. CSS 프리프로세서는 전처리의 구문을 사용하여 작성된 이 코드를 컴파일하고 CSS 파일을 만들어 주 HTML 문서에 의해 참조될 수 있다.

여기서는 프로젝트에 통합하기 위해 선택할 수 있는 몇 가지 CSS 프리프로세서를 살펴보겠습니다.

1. Sass/Scss

SCSS는 Sassy Cascading Style Sheet의 약자입니다. CSS의 더 발전된 변형은 SCSS이다. Sass는 프론트엔드 개발자들이 변수, if/else 문, 각각의 루프, 상속, 그리고 다른 계산 논리를 CSS 코드에 사용할 수 있게 한다. 대형 스타일시트를 잘 정리하고 프로젝트 내에서나 프로젝트 간에 설계를 쉽게 공유할 수 있습니다. Sass는 두 개의 구문을 가지고 있다. .sassfile 확장자는 이전 들여쓰기 기반 구문을 사용하며 세미콜론과 중괄호는 코드에서 생략합니다. 더 새롭고 널리 사용되는 구문은 .scss파일 확장자에 속합니다. 중괄호 및 세미콜론과 함께 표준 CSS 구문을 사용합니다.

 

설계자: 햄튼 캐틀린.

찬성:

• Sass는 프로그래밍 구조에서 당신이 깨끗하고, 쉽고, 덜한 CSS를 쓸 수 있도록 도와준다.
• 코드 수가 적어서 CSS를 더 빨리 작성할 수 있습니다.
• 이것은 CSS의 확장이기 때문에 더 안정적이고 강력하며 우아합니다. 그래서, 디자이너와 개발자들은 더 효율적이고 빠르게 일을 하기 쉽습니다.
• 모든 버전의 CSS와 호환된다. 따라서 사용 가능한 모든 CSS 라이브러리를 사용할 수 있습니다.
• 중첩된 구문과 색상 조작, 수학 함수 및 기타 값과 같은 유용한 함수를 사용할 수 있는 중첩 기능을 제공합니다.

반대:

• 개발자는 이 전처리를 사용하기 전에 이 전처리에 있는 새 기능을 학습할 충분한 시간이 있어야 합니다.
• Sass를 사용하는 것은 브라우저의 내장 요소 검사기의 장점을 잃을 수 있다.
• 코드를 컴파일해야 합니다.
• 어려운 문제 해결.

 

다음을 사용하는 상위 기업:

• 에어비앤비
• StackShare
• 액센츄어
• 트리바고

2. LESS(기울어진 스타일 시트)

LESS는 CSS(Cascading Style Sheet)로 컴파일하여 클라이언트측 또는 서버측에서 실행할 수 있는 동적 전처리기 스타일 시트 언어입니다. 적은 것이 오픈 소스 프로젝트입니다. 첫 번째 버전은 루비로 작성되었으나 이후 버전에서는 루비의 사용이 더 이상 사용되지 않고 자바스크립트로 대체되었다. 유효한 CSS가 유효하므로 Less의 들여쓰기된 구문은 중첩된 금속 언어입니다. 동일한 의미를 가진 Less 코드. Less와 다른 CSS 프리 컴파일러의 주된 차이점은 Less는 브라우저에 의한 less.js를 통한 실시간 컴파일을 허용한다는 것이다.

설계자: 알렉시스 셀리에.

 

찬성:

• LESS는 CSS 전처리기입니다. 컴파일 후 브라우저 전반에서 동작하는 단순 CSS를 생성한다.
• LESS는 브라우저 간 호환성을 지원합니다.
• LESS 코드는 네스팅을 사용하기 때문에 간단하고 깨끗하며 잘 정리되어 있다.
• 변수를 사용하기 때문에 LESS에서의 유지보수가 더 빨리 이루어질 수 있습니다.
• LESS는 코딩을 더 빠르고 시간을 절약할 수 있는 연산자 목록을 제공합니다.
• LESS를 사용하면 규칙 집합에서 전체 클래스를 참조하여 쉽게 재사용할 수 있습니다.
• LESS는 새롭고 긴 스타일링을 용이하게 할 수 있기 때문에 기존의 CSS보다 선호됩니다.

반대:

• CSS 전처리를 처음 하는 경우에는 LESS를 배우는 데 시간을 투자해야 합니다.
• LESS는 콤파스, 그라비티, 수지 등의 프레임워크를 포함하는 SASS와 같은 오래된 프리프로세서에 비해 적은 수의 프레임워크를 제공한다.
• LESS에서는 모듈 간의 긴밀한 결합이 이루어지기 때문에 종속 모듈을 재사용 및/또는 테스트하는 데 더 많은 노력이 필요합니다.

다음을 사용하는 상위 기업:

 

• 액센츄어
• 클럽하우스
• 형식
• 파트레온
• 오두

3. 스타일러스

스타일러스는 계단식 스타일시트로 컴파일되는 동적 스타일시트 전처리기 언어입니다. 디자인은 Sass와 LESS의 영향을 받았다. 더 넓은 범위의 기능과 후드 아래의 초고속 Node.js 시스템을 제공하며 사용자가 CSS를 작성할 때 가장 자유롭게 사용할 수 있다.

설계자: TJ Holowaychuk

찬성:

 

• 매우 강력한 내장 기능.
• 당신의 스타일 안에서 훨씬 더 많은 컴퓨팅과 헤비리프팅을 할 수 있습니다.
• Node.js로 작성되었으며, 빠르고 2018 자바스크립트 스택과 잘 맞습니다.
• 피토닉 문법은 훨씬 깔끔해 보이고 더 적은 수의 문자를 필요로 한다.

반대:

• 개발이 활발하지 않은 것 같습니다.
• 너무 너그럽게 봐주니까 혼선이 생길 수 있어.

다음을 사용하는 상위 기업:

• 베이원 솔루션
• 맷슨
• 디자인모도
• 졸리코드

 

4. PostCSS

PostCSS는 자바스크립트 기반 플러그인을 사용하여 일상적인 CSS 작업을 자동화하는 소프트웨어 개발 도구이다. 사용자가 기능 세트와 컴파일을 최대한 맞춤화할 수 있는 모듈식 플러그인 시스템을 활용한다.

다른 프리프로세서와 달리 PostCSS는 사용 중인 기능이나 스택에 대해 어떠한 가정도 하지 않습니다. 대신 사용할 기능에 따라 원하는 플러그인을 추가합니다. 플러그인을 추가하여 라이브러리와 같은 기능을 제공할 수 있습니다(예: Sass).

디자인: 안드레이 시트닉.

찬성:

 

• 비복제 모듈식 접근법 ---는 크게 사용자 정의할 수 있다.
• 순수 CSS로 작성되었으므로 개발자들은 새로운 구문을 배울 필요가 없습니다.
• 속도(플러그인 몇 개만 사용하는 경우)

반대:

• 속도(다시) --- 다른 설정을 모방할 경우, PostCCS는 최적화된 전용 도구가 제공하는 성능 이점이 없습니다.
• 일반적으로 여러 사람이 유지 관리하는 서로 다른 플러그인에 의존하기 때문에 일반적인 사전 프로세서보다 설치 및 유지 관리에 더 많은 노력을 기울입니다.

다음을 사용하는 상위 기업:

• 업로드케어
• SendGrid
• 뱅크살라드
• 위기프트
• 렌딧

 

5. 제발

이것은 당신의 CSS를 효율적으로 처리할 수 있는 Node.js 애플리케이션입니다. 프리프로세서의 사용을 단순화하고 최고의 포스트 프로세서와 결합합니다. 깔끔한 스타일시트를 만들고, 오래된 브라우저를 지원하며, 더 나은 유지 관리 기능을 제공합니다. Pleeease의 설정(순수 CSS뿐만 아니라 Sass 또는 Less와 같은 좋아하는 전처리의 구문을 사용할 수 있는 기능까지 갖추고 있다.

찬성:

• 내장된 자동 수정기는 caniuse.com의 데이터를 사용하여 공급업체 접두사를 추가합니다.
• 원본 코드를 볼 수 있는 소스 맵을 생성합니다.
• 구문 라이브러리가 아닌 도구이므로 순수 CSS 또는 다른 전처리와 함께 사용할 수 있습니다.
• 오래된 브라우저 기호에 대처하기 위한 명확하고 실용적인 용도.

반대:

 

• 잘 알려지지 않아서 자원을 찾는 것이 어려울 수도 있습니다.
• 다른 프리프로세서를 포함할 수 있는 기능은 이 단계에서 완전히 실험적입니다.

‍

원래 raftlabs.co에 게시되었습니다.