> For the complete documentation index, see [llms.txt](https://easonwang.gitbook.io/web_basic/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://easonwang.gitbook.io/web_basic/css-advance/less.md).

# Less

線上編輯器: <http://winless.org/online-less-compiler>

## 安裝

NPM

```
npm install less -g
```

新建一個檔案名為test.less

```
@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}
```

進行編譯

```
lessc test.less test.css
```

CDN

```
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
```

開啟線上編繹器進行練習

## 1.定義變數與使用四則運算

```
@nice-blue: #5B83AD;
@light-blue: @nice-blue * 1.5;

#header {
  color: @light-blue;
}
```

## 2.使用Mixin

(將 css規則直接塞入其他css規則中)

```
.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

#menu a {
  color: #111;
  .bordered;
}

.post a {
  color: red;
  .bordered;
}
```

## 3.更加清楚的子代規則

(以下面為例，選取id header內所有 相關class)

```
#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}
```

可寫成這樣

```
#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}
```

虛擬元素記得前面+&

```
.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}
```

## 4指定選擇器名稱的變數

```
@mySelector: banner;

.@{mySelector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}
```

參考至:

中文:<http://less.bootcss.com/features/#features-overview-feature>

英文:<http://lesscss.org/>