CSS의 3가지 유형의 전처리기에 대해 이야기해 보세요.

이 기사에서는 세 가지 CSS 전처리기를 소개하고 비교하여 차이점을 이해합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

1. 소개

CSS 전처리기는 새로운 언어를 정의합니다. 기본 아이디어는 개발자가 코딩 작업에만 이 언어를 사용하면 되므로 지루하고 지루한 작업을 단순화하는 것입니다. CSS 코드 작성 프로세스를 통해 CSS를 더욱 간결하고, 적응성이 뛰어나고, 읽기 쉽고, 계층적 관계에서 더욱 명확하게 만들고, 코드를 유지 관리하기 쉽게 만들 수 있습니다.

CSS 전처리기에는 다양한 유형이 있습니다. 세 가지 주요 CSS 전처리기는 Less, Sass(Scss) 및 Stylus입니다. 각각의 배경은 다음과 같습니다.

Sass: 2007년에 탄생했으며 가장 초기이자 가장 성숙한 CSS 전처리기입니다. 가장 강력한 CSS 프레임워크인 Ruby 커뮤니티와 Compass의 지원을 받습니다.

현재 LESS의 영향을 받아 CSS와 완벽하게 호환되는 SCSS로 발전했습니다(SCSS에서는 줄 바꿈 및 들여쓰기 대신 세미콜론과 중괄호를 사용해야 합니다).

Less: 2009년에 등장했습니다. SASS의 영향을 많이 받았지만 CSS 구문도 사용하므로 Ruby 커뮤니티 외부의 지지자들은 SASS를 훨씬 능가합니다.

단점은 SASS에 비해 프로그래밍 가능한 기능이 부족하다는 점입니다.

그러나 장점은 간단하고 CSS와 호환된다는 점이며 이는 SASS가 SCSS 시대로 진화하는 데 영향을 미쳤습니다. 유명한 Twitter Bootstrap은 LESS를 기본 언어로 사용합니다.

스타일러스: Node.js 커뮤니티에서 2010년에 제작되었습니다.

주로 Node 프로젝트에 CSS 전처리 지원을 제공하는 데 사용됩니다. 이 커뮤니티에는 특정 지지자가 있지만 넓은 의미에서 SASS 및 LESS만큼 인기가 좋지 않습니다.

2. 비교

CSS 전처리기를 사용하기 전에 가장 중요한 것은 구문을 이해하는 것입니다. 다행히 대부분의 전처리기의 구문은 기본적으로 CSS와 동일합니다.

먼저 Sass와 Less는 모두 표준 CSS 구문을 사용하므로 기존 CSS 코드를 전처리기 코드로 쉽게 변환할 수 있다면 Sass는 기본적으로 .sass 확장자를 사용하고 Less는 .less 확장자를 사용합니다.

h1 {
  color: #0982C1;
}

이것은 매우 일반적인 구문이지만 Sass는 중괄호와 세미콜론을 포함하지 않는 이전 구문도 지원합니다.

h1
  color: #0982c1

Stylus에서 지원하는 구문은 더 다양하며 기본적으로 다음과 같은 파일 확장자를 사용합니다. styl에서 다음은 스타일러스에서 지원하는 구문입니다.

/* style.styl */
h1 {
  color: #0982C1;
}
 
/* omit brackets */
h1
  color: #0982C1;
 
/* omit colons and semi-colons */
h1
  color #0982C1

동일한 스타일 시트에서 다른 변수를 사용할 수 있습니다. 예를 들어 다음 작성 방법은 오류를 보고하지 않습니다.

h1 {
  color #0982c1
}
h2
  font-size: 1.2em

관련 권장 사항:

2020 프런트 엔드 Vue 인터뷰 질문 요약(답변 포함)

vue 튜토리얼 추천: 2020년 최신 5개 vue.js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요: 프로그래밍 소개! !

위 내용은 CSS의 3가지 유형의 전처리기에 대해 이야기해 보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!