Less 시작하기

LESS 시작하기

LESS 튜토리얼

1 예시

first.less

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}

@mycolor: #abcdef;

div { 
  width: 100px; height: 100px;
  background-color: @mycolor;
  margin: 10px;
}
#box1 { .rounded-corners; }
#box2 { .rounded-corners(35px); }

first.php

<link rel="stylesheet/less" type="text/css" href="first.less">
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.1.0/less.min.js"></script>
<div id='box1'>box1</div>
<div id='box2'>box2</div>

→ http://zetawiki.com/ex/less/first.php

2 같이 보기

• LESS 가변변수 사용
• LESS watch 모드
• LESS