[CSS] less css - css를 효과적으로 작성하자.

Less란 무엇인가?

(공식 문서에 따르면)

Less(Leaner Style Sheets의 약어)는 이전 버전과 호환되는 CSS용 언어 확장입니다. 이것은 언어인 Less와 Less 스타일을 CSS 스타일로 변환하는 JavaScript 도구인 Less.js에 대한 공식 문서입니다.

 

css의 불편함을 보안해서 변수를 사용함으로서 유지보수 편리, 중첩 선언으로 반복되는 코드 감소, 선언된 스타일을 재사용하는 등등등..

의 역할을 해주는 확장된 언어이다.

 

.less 확장자를 사용하지만 브라우저는 .less를 인식할 수 없으므로 Less 문법에 따라 작성한 .less를 .css로 변환해주거나 (전처리기 사용), 혹은 자바스크립트 소스단에서 바로 .less를 링크로 연결해서 사용할 수 있다.

 

https://lesscss.org/usage/#using-less-in-the-browser

Using Less.js | Less.js

https://opentutorials.org/course/253/1953

클라이언트쪽 사용법 - 개발자 영어

 

CSS 변수 사용

css도 변수 사용이 가능하다. 익숙하게 사용하는 --font-14 : 14px; 을 var(--font-14)로 불러오는 형태로

var 함수를 사용하면 변수 사용이 가능하지만, 단순히 css에서 변수를 사용하는거보다 lesscss가 조금더 강력한 기능을 제공한다.

예컨대 여러 속성값을 하나의 변수로 묶는다던가..... 자세한 내용은 공식 문서를 참고하자!