적음(스타일시트 언어)

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

Less(Leaner Style Sheets, LES로 스타일 지정되는 경우도 있음)는 Cascading Style Sheet(CSS; 캐스케이드 스타일 시트)로 컴파일하여 클라이언트 [2]측 또는 서버 측에서 실행할 수 있는 동적 프리프로세서 스타일 시트 언어입니다.Alexis Sellier가 설계한 Less는 Sass의 영향을 받아 CSS와 같은 블록 포맷 [3]구문을 채택한 Sass의 새로운 "SCSS" 구문에 영향을 주었습니다.오픈 소스 프로젝트입니다.첫 번째 버전은 루비로 작성되었지만 이후 버전에서는 루비의 사용이 권장되지 않고 자바스크립트로 대체되었습니다.유효한 CSS는 같은 의미론에서 유효한 Less code이기 때문에 들여쓰기된 구문은 중첩된 메타 언어입니다.Less는 변수, 네스팅, 믹스인, 연산자 및 함수 메커니즘을 제공합니다.Less와 다른 CSS 프리 컴파일러의 주요 차이점은 [2][4]Less가 브라우저에 의한 less.js를 통한 실시간 컴파일을 허용한다는 것입니다.

특징들

변수

[Less] : 변수를 정의할 수 있습니다.[Less]의 변수는 at 기호(@)로 정의됩니다.변수 할당은 콜론(:)을 사용하여 수행됩니다.

변환 중에 변수 값이 출력 CSS [2]문서에 삽입됩니다. 

@parames(@parames)(녹색): #4D926F;  #머리글자 {   색.: @연두색; } h2 {   색.: @연두색; }

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

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

믹스인

mixins는 클래스 이름을 속성 중 하나로 포함시킴으로써 클래스의 모든 속성을 다른 클래스에 포함시킬 수 있으며, 따라서 일종의 상수 또는 변수로 동작합니다.또한 함수처럼 동작하고 인수를 사용할 수도 있습니다.CSS는 Mixin을 지원하지 않습니다.각 위치에서 반복되는 코드를 반복해야 합니다.Mixins를 사용하면 코드를 보다 효율적이고 깔끔하게 변경할 수 있을 뿐만 아니라 코드를 [2]쉽게 변경할 수 있습니다. 

.동그란 모양의 (@parames(@parames): 5px 10px 8px 2px) {   -웹킷-국경의: @반지름;   -외부-국경의: @반지름;   국경의: @반지름; }  #머리글자 {   .disc-disclosed; } #바닥글 {   .disc-disc (10px) 25px 35px 0px); }

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; }

기능 및 조작

보다 적게는 조작과 기능을 가능하게 합니다.연산을 통해 속성 값 및 색상의 덧셈, 뺄셈, 나눗셈 및 곱셈을 수행할 수 있으며, 이를 사용하여 속성 간에 복잡한 관계를 만들 수 있습니다.함수는 JavaScript 코드와 일대일로 매핑되므로 값을 조작할 수 있습니다. 

@the- 테두리: 1px; @base-컬러: #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 code를 순수한 CSS로 렌더링하고 CSS를 사이트에 업로드하는 것입니다.이 옵션을 사용하면 .less 파일이 업로드되지 않으며 사이트에는 less.js JavaScript 변환기가 필요하지 않습니다.

소프트웨어 절감

이름. 묘사 소프트웨어 라이선스 플랫폼 기능
WinLess - Windows GUI를 저렴한 가격으로 제공.js GUI의 컴파일러 수 감소 아파치 2.0[8] 창문들 컴파일러
오도독 씹다 에디터 및 컴파일러 감소(Adobe AIR 필요) GPL[9] Windows, Mac OS X 컴파일러
에디터
less.displays-windows less.js를 사용하여 *.less 파일을 CSS로 컴파일하는 Windows용 심플한 명령줄 유틸리티. MIT 라이선스[10] 창문들 컴파일러
less.app 컴파일러의 감소 독자 사양 Mac OS X 컴파일러
코드킷 컴파일러의 감소 독자 사양 Mac OS X 컴파일러
Less Engine(엔진 부족) 컴파일러의 감소 공짜 OpenCart 플러그인 컴파일러
심플리스 컴파일러의 감소 무료이지만 명시적[11] 라이센스 없음 창문들
Mac OS X
리눅스		 컴파일러
차피 컴파일러의 감소 Ms-PL[12] Visual Studio 플러그인 컴파일러
Mindscape Web Workbench 구문 강조 표시 및 IntelliSense for Less 및 Sass 독자 사양 Visual Studio 플러그인 컴파일러
구문 강조 표시
보다 적게 사용할 수 있는 Eclipse 플러그인 이클립스 플러그인 EPL 1.0[13] 이클립스 플러그인 구문 강조 표시
콘텐츠 지원
컴파일러
mod_less Apache2 모듈로 컴파일 시간 단축 오픈 소스 리눅스 컴파일러
불평이 적다 Less를 CSS로 변환하기 위한 Node.js Grunt 태스크 MIT[14] Node.js 컴파일러
웹 에센셜 Less 및 Sass를 지원하는 Visual Studio 확장 아파치 2.0 창문들 구문 강조 표시, 콘텐츠 지원, 컴파일러
동작하지 않다 순수 C++ 컴파일러 MIT[16] Windows, Linux, MacOS 이상 컴파일러
Web Compiler의 감소 웹 기반 컴파일러 MIT[17] Windows, Linux, MacOS 이상 컴파일러, 구문 강조 표시, 미니퍼

「 」를 참조해 주세요.

레퍼런스

  1. ^ https://github.com/less/less.js/releases/tag/v4.1.3 를 참조해 주세요.
  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 2021-03-19.
  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.

외부 링크