Less 믹스인

1 개요[ | ]

Less Mixin
Less 믹스인

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

css

Copy

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

2 예시 1[ | ]

html

html

Copy

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

less

css

Copy

#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

html

Copy

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

less

css

Copy

#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 같이 보기[ | ]