---
type: snippet
tags: [less, css, variables]
status: release
ctime: 2025-12-29
mtime: 2025-12-29
---

```less
// 기본
@primary: #3498db;
.button { color: @primary; }

// 보간 (선택자, 속성, URL에서)
@component: 'button';
.@{component} { ... }           // .button
background-@{property}: blue;   // background-color: blue
url('@{path}/icon.svg')

// 변수를 이용한 변수
@theme: 'primary';
color: @@theme;  // @primary 값

// 맵 (LESS 3.5+)
@colors: { primary: #3498db; danger: #e74c3c; };
color: @colors[primary];

// CSS 변수 조합
:root { --primary: @primary; }
.el { color: var(~'--@{prefix}-color'); }
```

---

- `~""` 이스케이프 (문자열 그대로 출력)
- `@{}` 보간 (변수를 문자열로 치환)
- `@@var` 변수를 이용한 변수 참조

---

https://lesscss.org/features/#variables-feature