집 >웹 프론트엔드 >HTML 튜토리얼 >CSS 전처리기에 대한 자세한 설명 Less

CSS 전처리기에 대한 자세한 설명 Less

php中世界最好的语言원래의: 2018-02-28 10:13:561593검색

CSS 전처리기

CSS 전처리기가 있는 이유

CSS는 기본적으로 프로그래머용 도구가 아닌 디자이너용 도구입니다. 프로그래머의 눈에 CSS는 PHP, Javascript 등과 같은 다른 프로그래밍 언어와 달리 자체 변수, 상수, 조건문 및 일부 프로그래밍 구문을 가지고 있습니다. 작성하는 데 시간이 많이 걸리고 코드를 구성하고 유지 관리하기가 어렵습니다.

자연스럽게 일부 사람들은 CSS에 다른 프로그래밍 언어처럼 일부 프로그래밍 요소를 추가하여 CSS가 다른 프로그래밍 언어처럼 미리 결정된 처리를 수행할 수 있는지 궁금해하기 시작했습니다. 이런 식으로 "CSS 전처리기"가 있습니다.

CSS 전처리기란 무엇입니까

CSS 언어의 상위 집합이며 CSS보다 더 완벽합니다.

CSS 전처리기는 새로운 언어를 정의합니다. 기본 아이디어는 특수 프로그래밍 언어를 사용하여 CSS에 일부 프로그래밍 기능을 추가하고 CSS를 대상으로 사용하여 파일을 생성한 다음 개발자가 코딩 작업에만 이 언어를 사용하면 된다는 것입니다.

일반인의 관점에서 CSS 전처리기는 특수 프로그래밍 언어를 사용하여 웹 페이지 스타일을 디자인한 다음 프로젝트 사용을 위해 일반 CSS 파일로 컴파일합니다. CSS 전처리기는 브라우저 호환성 문제를 고려하지 않고 CSS에 일부 프로그래밍 기능을 추가합니다. 예를 들어 CSS에서 프로그래밍 언어의 일부 기본 기능을 사용하면 더 많은 기능을 사용할 수 있습니다. 간결하고, 적응성이 뛰어나고, 읽기 쉽고, 유지 관리가 더 쉽고, 기타 여러 가지 이점이 있습니다.

CSS 전처리기 기술은 매우 성숙되었으며 Sass(SCSS), LESS, Stylus, Turbine, Swithch CSS, CSS Cacheer, DT CSS 등과 같은 다양한 CSS 전처리기 언어가 등장했습니다. CSS 전처리기가 너무 많아서 최근 인터넷상에서 "어떤 CSS 전처리기를 선택해야 하는가?"가 화제가 되었고, Linkedin, Twitter, CSS-Trick, Zhihu 및 주요 기술 포럼에서는 이에 대해 많은 사람들이 논쟁을 벌이고 있습니다. 이는 우리가 한때 CSS 전처리기를 사용해야 하는지에 대해 논의했던 것보다 큰 진전입니다.

지금까지 많은 우수한 CSS 전처리기 언어 중에서 Sass, LESS 및 Stylus가 가장 우수하며 많은 토론과 비교가 있었습니다. 이 기사에서는 배경, 설치, 사용 구문, 차이점 및 기타 비교를 통해 세 가지 CSS 전처리기 언어를 소개합니다. 저는 프론트엔드 개발 엔지니어들이 어떤 CSS 전처리기를 선택해야 할지 스스로 선택할 것이라고 믿습니다.

less, less 소개는 변수, 믹스, 함수, 중첩, 루프 및 기타 기능을 지원하는 널리 사용되는 전처리 CSS입니다.

less

Comments

less 구문에는 두 가지 종류의 주석이 있을 수 있습니다.

첫 번째 주석 유형: 템플릿 주석

// 템플릿 주석 여기에 있는 주석은 CSS로 변환된 후 삭제됩니다

브라우저에서 사용하기 전에 CSS로 변환할 필요가 적기 때문입니다. CSS로 변환하면 이런 댓글은 삭제됩니다(결국 CSS는 이런 댓글을 인식하지 못합니다).

두 번째 댓글: CSS 주석 구문

/* CSS 주석 구문 CSS로 변환하여 유지 */

요약: Less로 댓글을 작성할 경우 첫 번째 유형의 댓글을 작성하는 것이 좋습니다. 저작권과 유사한 것이 아니라면 두 번째 유형의 주석이 사용됩니다.

변수 정의

재사용되거나 자주 수정되는 값을 변수로 정의하고, 이 변수를 필요한 곳에 참조하면 됩니다. 이렇게 하면 작업이 많이 중복되는 것을 방지할 수 있습니다.

(1) less 파일에서 변수의 형식을 정의합니다.

@Variable name: Variable value; //Format@bgColor: #f5f5f5; //Format example

(2) 동시에, less 파일에서 이 변수를 참조하세요.

마지막으로 less 파일의 전체 코드는 다음과 같습니다.

main.less：
// 定义变量@bgColor: #f5f5f5;// 引用变量body{    background-color: @bgColor;}

위의 less 파일을 CSS 파일로 컴파일한 후(다음 단락에서 less 파일의 컴파일에 대해 설명합니다) 자동으로 생성된 코드는 다음과 같습니다.

main.css：
body{    background-color: #f5f5f5;}

중첩 사용

자손 선택자는 CSS에서 자주 사용되며 그 효과는 다음과 같습니다.

.container {
  width: 1024px;}.container > .row {
  height: 100%;}.container > .row a {
  color: #f40;}.container > .row a:hover {
  color: #f50;}

위 코드는 여러 레이어에 중첩되어 작성하기가 매우 지루합니다. 하지만 이 코드를 작성하기 위해 less의 중첩 구문을 사용하면 더 간결해질 것입니다.

nesting의 예는 다음과 같습니다.

main.less:
.container {  width: @containerWidth;  > .row {    height: 100%;    a {      color: #f40;      &:hover {        color: #f50;      }    }  }  div {    width: 100px;    .hello {      background-color: #00f;    }  }}

위의 less 파일을 CSS 파일로 컴파일한 후 자동으로 생성되는 코드는 다음과 같습니다.

main.css
.container {    width: 1024px;}.container > .row {    height: 100%;}.container > .row a {    color: #f40;}.container > .row a:hover {    color: #f50;}.container div {    width: 100px;}.container div .hello {    background-color: #00f;}

이 사례를 읽으신 후에는 방법을 마스터하신 것 같습니다. 정보는 PHP 중국어 웹사이트의 기타 관련 기사를 주목해주세요!