프로트엔드 개발자라면 대부분 아시겠지만 그 외 아직 프리프로세서가 뭔지 모르는 분들을 위해 포스팅 합니다.
프리프로세서 중에 LESS, SASS/SCSS, COMPASS등이 있는데 그중에 근래 트위터 부트스트랩이 사용했다고 해서 인기를 모으고 있는 LESS에 대해서 설명을 해 볼까 합니다.
- CSS 프리프로세서란
- LESS 문법
- LESS 적용하기
1. CSS 프리프로세서(Preprocessor) 란?
CSS의 코드는 원래 프로그래밍언어라기 보다는 화면을 표현하기 위한 언어이기때문에 사실 개발자들이 보면 정말 체계적이지도 않고 쓴 코드 또 쓰고 또 쓰고... 답답하기 이를때 없었을 것입니다. 오죽했으면 LESS를 만들어 냈을까요.
CSS 프리프로세서는 CSS를 변수나 Nested Rules을 이용하여 쉽고 빠르고 체계적으로 프로그래밍 할 수 있게 만든것을 말합니다.
위키백과에는..
"a preprocessor is a program that processes its input data to produce output that is used as input to another program." 라고 하네요...
프리프로세서에는 LESS, SASS/SCSS, COMPASS등이 있는데.. 그중에 LESS의 문법을 따라 프로그래밍 한 것을 LESS라고 합니다.
LESS는 트위터의 Bootstrap에서 사용했다고 해서 많이 유명해졌는데요. 사용법이 쉽고 간단하여 CSS만 안다면 쉽게 LESS를 만들어 낼 수 있습니다.
LESS의 결과파일 확장자는 .less이며 이것을 웹사이트에서 사용하기 위해서는 HTML에서 less.js로 번역을 하거나 SimpLESS나 Crunch같은 컴파일러로 컴파일을 하여 사용하면 됩니다.
2. LESS 문법
less의 문법은 정말 간단합니다. 중요한 요소 2가지만 알면 웬만한 작성은 가능합니다.
바로 변수와 내포규칙입니다.
1. 변수(Variables)
변수는 Less를 사용하는데 있어서 가장 기초적이고 핵심적인 부분입니다. 변수는 CSS의 특정부분을 대체합니다.
변수는 앞에 @를 붙이면 됩니다.
@baseFontFamily :'Gulim', 'Dotum', sans-serif;
@baseColor :#fff;
@textColor :#333;
body {
font-family: @baseFontFamily;
background-color: @baseColor;
color: @textColor;
width:980px;
margin:10px auto;
}
DIV {
background-color: @baseColor;
}
위의 빨간색으로 표시한 코드를 보시면 @로 시작하는 코드를 여러번 반복해서 사용할 수 있습니다.
이렇게 했을경우 추후 @로 시작하는 변수값만 수정한다면 일괄적으로 변경적용이 가능합니다. 쉽게 말하면 색상테마를 변경할때 예전처럼 일일이 선택자에 해당하는 컬러값을 찾아서 바꾸어줄 필요없이 그냥 변수의 색상값만 바꾸면 일괄적으로 바뀌니 쉽게 변경이 가능합니다. 또한 같은 빨강색이라도 약간씩 코드값이 다를 텐데 그냥 아무생각없이 CSS를 작성하게 되면 체계적이지 못한 색상체계를 사용하게 되는데요 less를 사용하면 똑같은 색상값을 동일하게 적용이 가능합니다..
2. 내포 규칙(Nested Rules)
기존의 CSS방식을 사용하면 선택자가 중복된 부분이 많이 나타나는데 LESS의 Nested Rules를 이용하면 부모 선택자에 포함(Nest)해서 사용하기 떄문에 중복을 줄이고 이해하기도 쉽습니다.
background: #ffffff;
border: 1px solid #cccccc;
border-radius: 5px;
height: 40px;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline;
float: left;
position: relative;
기존 CSS는 위와 같이 선택자가 중복되어 사용됩니다.
background: @basecolor;
border:@Border;
border-radius: 5px;
height:40px;
ul {
list-style:none;
li {
display: inline;
float: left;
position: relative;
}
}
}
LESS는 위와 같이 상위 선택자의 안에(Nest) 하위 선택자를 포함시켜 프로그래밍을 할 수 있습니다.
중복된 요소가 없고 이해하기 쉽게 프로그래밍을 할 수 있습니다.
3. LESS 적용하기
less의 문법대로 프로그래밍을 했다면 .less확장자의 파일이 하나 생성되었을 텐데요.. 이것을 HTML에서 바로 사용하여 적용이 되지는 않습니다. 해당 파일을 브라우저가 이해할 수 있게 변경작업을 해주어야 하는데요. 여기에는 2가지 방법이 있습니다.
하나는 less에서 제공해주는 less.js파일을 생성한 .less파일 아래쪽에 링크시켜서 해석할 수 있게 해주거나 SimpLESS나 Crunch같은 외부 컴파일러로 CSS로 컴파일해서 기존처럼 링크시켜주면 됩니다.
1. less.js를 링크하여 적용하기
less사이트에서 제공해주는 less.js를 링크걸어 사용하는 방법입니다.
장점이라면 별로의 컴파일 없이 less.js파일만 적용하면 되기 때문에 쉽게 확인하고 반영이 가능합니다.
단점이라면 IE9 이상버전과 크롬, 파이어폭스 등에서는 적용이 됩니다만 IE8이하 버전에서는 적용이 되지 않습니다.
또한 반응속도가 약간느려서 코드가 많고 복잡할경우 화면 딜레이가 있을 수 있습니다.
1. less.js 다운로드 받기
먼저 lesscss.org웹사이트에 접속을 하여 화면에 있는것처럼 less.js를 다운로드 받습니다.
다운로드는 마우스 오른클릭 후 "다른이름으로 링크 저장"을 해야 파일 형태로 저장이 됩니다.
2. HTML에 적용하기
다운로드 받은 파일을 HTML의 less파일 아래에 적용합니다.
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>less</title>
<link rel="stylesheet/less" type="text/css" href="style.less">
<script src="less-1.3.1.min.js" type="text/javascript"></script>
</head>
<body>
<div>
<header>
<h1>index</h1>
</header>
</div>
</body>
</html>
위의 코드는 HTML을 가장 단순하게 작성한 코드입니다.
보시면 본인이 생성한 .less파일을 마치 CSS스타일 파일을 링크 걸듯 링크를 걸면 됩니다.
[[ 주의할 점 하나!! ]]
CSS의 링크가..
<link rel="stylesheet" type="text/css" href="style.css">
이것인 반면, less의 링크는...
<link rel="stylesheet/less" type="text/css" href="style.less">
이것과 같습니다.
[[ 주의할 점 둘!! ]]
지금 다운로드 받은 less.js(less-1.3.1.min.js)파일은 내가 만든 less파일 링크의 아래쪽에 붙혀넣어야 한다는 것입니다.
2. .less파일을 컴파일해서 적용하기
이번에는 내가만든 less파일을 컴파일해서 css로 만든다음 링크를 거는 방법입니다.
less파일을 컴파일 하는 프로그램은 simpLESS와 Crunch등이 있습니다. 설명은 SimpLESS만 하도록 하겠습니다.
Crunch는 사용법이 비슷하니 실제 사용해보시면 이해가 쉽습니다.
1. simpLESS 다운받기
[ http://wearekiss.com/simpless ]
먼저 simpLESS를 다운로드 받습니다.
http://wearekiss.com/simpless에 접속해서 좌측하단에 있는 다운로드버튼을 누르면 다운로드됩니다.
윈도우버전도 있고 애플버전도 있네요.
다운로드받은 SimpLESS를 실행하면 간단히 설치가 되고 위와 같이 파일이 실행됩니다.
중요한 점 하나!!!. SimpLESS는 C드라이브에 설치해야 합니다. C드라이브이외에 설치를 하면 실행이 되지 않습니다.
사용법은 간단합니다. less파일이나 폴더를 드레그앤드롭(마우스로 끌어다놓기)를 하면 바로 인식을 합니다.
LESS파일을 적요시키면 위와 같이 적용이 되는데..
"1번"은 적용버튼입니다. "1번"을 누르면 바로 css파일로 적용이 됩니다. 사실 "1번"버튼을 굳이 눌러도 less파일을 변경하면 자동으로 인식해서 변환됩니다.
"2번"은 css결과파일이 저장되는 위치입니다. 위치를 지정할 수 있습니다.
"3번"은 prefixr, minify, love 옵션이 있는데....
prefixr는 크롬이나 FF, IE에 따라 개별적용되는 prefixr이 자동으로 생성이 됩니다.
minify는 코드를 최소화 시켜줍니다. 공백을 모두 빼버려서 용량이 줄어들기 때문에 최적화가 됩니다. 대신 생성된 CSS파일 분석이 힘듭니다.
love는 SimpLESS의 소개코드가 자동으로 들어가게 됩니다.
다음번에는 제가 주 편집기로 사용하는 Notepad++에 LESS를 사용할 수 있는 환경세팅에 대해서 포스팅해보도록 하겠습니다.
