Less 믹스인

1 개요

Less Mixin

Less 믹스인

• CSS 클래스를 함수처럼 사용 가능
• 파라미터 생략(기본값) 적용 가능

.클래스명 (파라미터: 기본값) {
  // 속성 정의
}

2 예시 1

html

<div id='box1'></div>
<div id='box2'></div>

less

#box1 {
  background: red;
  .my-bordered;
}
#box2 {
  background: green;
  .my-bordered;
}
.my-bordered { border: 10px solid gray; }
div { width: 60px; height:60px; margin:20px; }

결과

3 예시 2

html

<div id='box1'></div>
<div id='box2'></div>

less

#box1 { .my-rounded; }
#box2 { .my-rounded(40px); }

.my-rounded (@radius: 10px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}

div {
  width: 100px; height:100px;
  background: green;
  margin: 20px;
}

결과

4 같이 보기

• Less
• 믹스인