CSS에서 less는 무엇을 의미하나요?

CSS에서 less는 CSS를 더 쉽게 유지 관리하고 확장할 수 있도록 CSS 언어를 확장하는 전처리 언어입니다. 또한 웹 브라우저를 통해 읽을 수 있도록 웹 사이트 테이블에 대한 사용자 정의, 관리 및 재사용이 가능한 스타일을 가능하게 하는 전처리기이기도 합니다. .

이 튜토리얼의 운영 환경: Windows 10 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS에서 Less는 무엇을 의미하나요?

Less는 CSS 전처리 언어로, CSS를 더 쉽게 유지 관리하고 확장할 수 있도록 CSS 언어를 확장하고 변수, 믹스인, 함수 및 기타 기능을 추가합니다.

LESS는 웹사이트용 사용자 정의, 관리 및 재사용이 가능한 스타일시트를 가능하게 하는 CSS 전처리기입니다. LESS는 CSS의 기능을 확장하는 동적 스타일 시트 언어입니다. LESS는 브라우저 간에도 친화적입니다.

CSS 전처리기는 CSS를 확장하여 웹 브라우저에서 읽을 수 있도록 일반 CSS 구문으로 컴파일하는 스크립팅 언어입니다. 동적 CSS를 구축하기 위한 변수, 함수, 믹스인, 액션과 같은 기능을 제공합니다.

Less를 사용하면 변수 정의, 중첩 선언 사용, 함수 정의 등을 수행할 수 있습니다. 엄밀히 말하면 Less는 (1) Less 구문과 (2) Less 전처리기의 두 부분으로 구성됩니다. 결국 브라우저는 CSS만 이해하므로 Less 파일은 Less 전처리기를 통해 CSS로 컴파일되어야 합니다.

예제는 다음과 같습니다.

@base: #f938ab;
.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

Css 코드로 출력은 다음과 같습니다.

.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

(영상 공유 학습: css 영상 튜토리얼)

위 내용은 CSS에서 less는 무엇을 의미하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!