덜(스타일 시트 언어)

Less (style sheet language)
더 적은
LESS Logo.svg
설계자알렉시스 셀리에
개발자알렉시스 셀리에, 드미트리 파데예프
처음 등장2009; 14년 전 (2009)
안정적 방출
4.1.3[1] / 2022년 6월 9일; 12개월 전(2022년 6월 9일)
타이핑 분야역학
구현 언어자바스크립트
OS크로스 플랫폼
면허증.Apache 라이센스 2.0
파일 이름 확장명.더 적은
웹사이트lesscss.org
의 영향을 받은
CSS, Sass
영향받은
Sass, 더 적은 프레임워크, 부트스트랩(v3)

Less(Leaner Style Sheets; LESS로 양식화됨)는 CSS(Cascading Style Sheets)로 컴파일되어 클라이언트 측 또는 서버 [2]측에서 실행될 수 있는 동적 프리프로세서 스타일 시트 언어입니다.알렉시스 셀리에가 설계한 Less는 Sass의 영향을 받았으며 CSS와 같은 블록 형식 [3]구문을 적용한 SCSS의 새로운 구문에 영향을 주었습니다.적은 수의 오픈 소스 프로젝트입니다.첫 번째 버전은 루비로 작성되었지만, 이후 버전에서는 루비의 사용이 더 이상 권장되지 않고 자바스크립트로 대체되었습니다.유효한 CSS가 유효하므로 Less의 들여쓰기 구문은 중첩된 금속 언어입니다. 동일한 의미를 가진 Less 코드입니다.Less는 변수, 중첩, 믹스인, 연산자 및 함수를 제공합니다. Less와 다른 CSS 프리 컴파일러의 주요 차이점은 [2][4]Less가 브라우저에서 less.js를 통한 실시간 컴파일을 허용한다는 것입니다.

특징들

변수

작은 값을 사용하면 변수를 정의할 수 있습니다.작은 값의 변수는 앳 마크(@)로 정의됩니다.변수 할당은 콜론(:)으로 수행됩니다.

번역하는 동안 변수의 값은 출력 CSS [2]문서에 삽입됩니다. 

@지옥의-초록색: #4D926F;  #머리말 {   색.: @연두색의; } h2 {   색.: @연두색의; }

Less의 위 코드는 다음 CSS 코드로 컴파일됩니다. 

#머리말 {   색.: #4D926F; } h2 {   색.: #4D926F; }

믹스인

Mixins는 클래스 이름을 속성 중 하나로 포함하여 클래스의 모든 속성을 다른 클래스에 포함할 수 있으므로 일종의 상수 또는 변수로 동작합니다.그들은 또한 함수처럼 행동하고 인수를 취할 수 있습니다. CSS는 Mixins를 지원하지 않습니다.반복되는 코드는 각 위치에서 반복되어야 합니다.믹스인을 사용하면 코드를 보다 효율적이고 깨끗하게 변경할 수 있을 뿐만 아니라 [2]코드를 쉽게 변경할 수 있습니다. 

.둥근 모양의 (@지옥의: 5파운드 10파운드 8인치 2장) {   -웹킷-국경을 넘는: @반지름;   -어쨌든-국경을 넘는: @반지름;   국경을 넘는: @반지름; }  #머리말 {   .1987년생; } #바닥글 {   .sk-sk(10개) 25센트 35인치 0ppm); }

Less의 위 코드는 다음의 CSS 코드로 컴파일됩니다.

#머리말 {   -웹킷-국경을 넘는: 5px 10px 8px 2px;   -어쨌든-국경을 넘는: 5px 10px 8px 2px;   국경을 넘는: 5px 10px 8px 2px; } #바닥글 {   -웹킷-국경을 넘는: 10px 25px 35px 0px;   -어쨌든-국경을 넘는: 10px 25px 35px 0px;   국경을 넘는: 10px 25px 35px 0px; }

Less에는 동일한 클래스에서 혼합할 수 있지만 매개 변수를 허용하는 매개 변수 혼합이라는 특수한 유형의 규칙 집합이 있습니다. 

#머리말 {   h1 {     글꼴 크기의: 26px;     폰트급의: 대담한;   }   p {     글꼴 크기의: 16px;     a {       텍스트 장식: 없음.;       색.: 빨간.;       &:스캐나다 {         국경 너비의: 1px;         색.: #ffff;       }     }   } }

Less의 위 코드는 다음의 CSS 코드로 컴파일됩니다.

#머리말 h1 {   글꼴 크기의: 26px;   폰트급의: 대담한; } #머리말 p {   글꼴 크기의: 16px; } #머리말 p a {   텍스트 장식: 없음.;   색.: 빨간.; } #머리말 p a:맴돌다 {   국경 너비의: 1px;   색.: #ffff; }

기능 및 작동

더 적게는 작업 및 기능을 허용합니다.연산을 통해 속성 값과 색상을 추가, 뺄셈, 분할 및 곱셈할 수 있으며, 속성 간의 복잡한 관계를 만드는 데 사용할 수 있습니다.함수는 자바스크립트 코드와 일대일로 매핑하여 값을 조작할 수 있습니다. 

@그-경계의: 1개의 돈; @베이스의-색상: #111; @붉은:        #842210;  #머리말 {   색.: @저색의 * 3;   좌경의: @국경선;   국경 우경의: @국경선 * 3; } #바닥글 {   색.: @저색의 + #003300;   테두리 색의: 불포화의(@빨간., 10%); }

Less의 위 코드는 다음의 CSS 코드로 컴파일됩니다.

#머리말 {   색.: #333;   좌경의: 1px;   국경 우경의: 3px; } #바닥글 {   색.: #114411;   테두리 색의: #7d2717; }

비교

사스

Sass와 Less는 모두 CSS 프리프로세서이며 정적 [5]규칙 대신 프로그래밍 구조에서 깨끗한 CSS를 쓸 수 있습니다.

Sass에서 [6][3]영감을 얻은 것이 적습니다.Sass는 CSS를 단순화하고 확장하기 위해 설계되었기 때문에 곱슬곱슬한 중괄호와 같은 것들이 구문에서 제거되었습니다.Less는 가능한 한 CSS에 가깝게 설계되었으며, 결과적으로 기존 CSS는 유효한 Less [7]코드로 사용될 수 있습니다.

새 버전의 Sass는 SCSS(Sassy CSS)라는 CSS와 유사한 구문도 도입했습니다.

사이트에서 사용

적은 수의 방법으로 사이트에 적용할 수 있습니다.한 가지 옵션은 less.js JavaScript 파일을 포함하여 코드를 즉시 변환하는 것입니다.그런 다음 브라우저는 출력 CSS를 렌더링합니다.또 다른 옵션은 Less 코드를 순수 CSS로 렌더링하고 CSS를 사이트에 업로드하는 것입니다.이 옵션을 사용하면 .less 파일이 업로드되지 않으며 사이트에 less.js JavaScript 변환기가 필요하지 않습니다.

소프트웨어 감소

이름. 묘사 소프트웨어 라이센스 플랫폼 기능성
WinLess - 적은 비용으로 Windows GUI 사용 가능.js GUI 없는 컴파일러 아파치 2.0[8] 창문들 컴파일러
오도독 씹다 편집기 및 컴파일러 감소(Adobe AIR 필요) GPL[9] Windows, Mac OS X 컴파일러
편집자
less.js-window less.js를 사용하여 *.less 파일을 CSS로 컴파일하는 Windows용 간단한 명령줄 유틸리티. MIT 라이선스[10] 창문들 컴파일러
less.app 컴파일러 감소 소유권 맥 OS X 컴파일러
코드 키트 컴파일러 감소 소유권 맥 OS X 컴파일러
엔진 감소 컴파일러 감소 공짜 오픈카트 플러그인 컴파일러
단순함 컴파일러 감소 무료이지만 명시적인[11] 라이선스는 없습니다. 창문들
맥 OS X
리눅스		 컴파일러
치르피 컴파일러 감소 Ms-PL[12] Visual Studio 플러그인 컴파일러
마인드스케이프 웹 워크벤치 구문 강조 및 IntelliSense for Less and Sass 소유권 Visual Studio 플러그인 컴파일러
구문 강조 표시
더 적은 비용으로 Eclipse 플러그인 이클립스 플러그인 EPL 1.0[13] 이클립스 플러그인 구문 강조 표시
콘텐츠 지원
컴파일러
mod_less Apache2 모듈을 통한 신속한 컴파일 감소 오픈 소스 리눅스 컴파일러
불평불만이 없는 Node.js 적은 것을 CSS로 변환하는 Grunt 작업 MIT[14] 노드.js 컴파일러
웹 Essentials Visual Studio 확장 기능으로 더 적은 수의 Sass 지원 아파치 2.0 창문들 구문 강조, 콘텐츠 지원, 컴파일러
상류 사회의 순수 C++ 컴파일러 MIT[16] 윈도우즈, 리눅스, MacOS 이상 컴파일러
웹 컴파일러 감소 웹 기반 컴파일러 MIT[17] 윈도우즈, 리눅스, MacOS 이상 컴파일러, 구문 강조, 최소화

참고 항목

레퍼런스

  1. ^ 오류: 참조를 제대로 표시할 수 없습니다.자세한 내용은 설명서를 참조하십시오.
  2. ^ a b c d The Core Less Team. "Getting started Less.js". Less.js. Retrieved 2021-03-19.
  3. ^ a b Weizenbaum, Nathan (2009-06-17). "Sass and Less : Nex3". Archived from the original on 2009-06-21. Retrieved 2021-03-19.
  4. ^ Meng, Jiew (2010-12-14). Mortensen, Peter (ed.). "css - Is there a SASS.js? Something like LESS.js?". Stack Overflow. Retrieved 2021-03-19.
  5. ^ Atwood, Jeff (2010-04-30). "What's Wrong With CSS". Coding Horror. Retrieved 2022-12-03.
  6. ^ The Core Less Team. "About Less.js". Less.js. Retrieved 2021-03-19.
  7. ^ Eppstein, Chris (2010-11-10). "sass_and_less_compared.markdown". GitHub Gist. Retrieved 2021-03-19.
  8. ^ Lagendijk, Mark (2013-01-29). "License Information · Issue #55 · marklagendijk/WinLess". GitHub. Retrieved 2021-03-19.
  9. ^ Dean, Matthew (2011-12-02). "Crunch/LICENSE.txt at master · matthew-dean/Crunch". GitHub. Retrieved 2021-03-19.
  10. ^ Smart, Duncan (2013-07-25). "less.js-windows/LICENSE at master · duncansmart/less.js-windows". GitHub. Retrieved 2021-03-19.
  11. ^ Engel, Christian (2012-07-29). "SimpLESS/LICENSE.txt at master · Paratron/SimpLESS". GitHub. Retrieved 2021-03-19.
  12. ^ Evan Nagle. "Chirpy - VS Add In For Handling Js, Css, DotLess, and T4 Files - CodePlex Archive". CodePlex. Archived from the original on 2021-02-20. Retrieved 2021-03-19.
  13. ^ Vincent Simonet. "Eclipse plugin for LESS". normalesup.org. Retrieved 2021-03-19.
  14. ^ Kellen, Tyler (2012-09-04). "grunt-contrib-less/LICENSE-MIT at master · gruntjs/grunt-contrib-less". GitHub. Retrieved 2021-03-19.
  15. ^ Kristensen, Mads (2014-06-18). "WebEssentials2013/LICENSE.txt at master · madskristensen/WebEssentials2013". GitHub. Retrieved 2021-03-19.
  16. ^ Bram van der Kroef (2017-07-11). "clessc/LICENSE at master · BramvdKroef/clessc". GitHub. Retrieved 2021-03-19.
  17. ^ SamBrishes (2018-12-15). "snout.less/LICENSE.md at master · pytesNET/snout.less". GitHub. Retrieved 2021-03-19.

외부 링크