---
# System prepended metadata

title: CSS-Less大全
tags: [Less, CSS]

---

# 基本介紹
## 必裝插件
![image](https://hackmd.io/_uploads/rJu_HISt6.png)
## 註釋
單行註釋
ctrl + /
多行註釋
shift + alt + A
# 嵌套特性
## 基本嵌套
Less
```css=
h1 {
  color: red;
  div{
    color: green;
  }
}
```
CSS
```css=
h1 {
  color: red;
}
h1 div {
  color: green;
}
```
## &
&表示當前選擇器，大括號屬於誰就表示誰
應用:配合hover、active、nth-child

Less
```css=
h1 {
  color: red;
  div{
    color: green;
    a{
      cursor: pointer;
      &:hover{
        color: blue;
      }
    }
  }
}
```
CSS
```css=
h1 {
  color: red;
}
h1 div {
  color: green;
}
h1 div a {
  cursor: pointer;
}
h1 div a:hover {
  color: blue;
}

```
# 計算特性
Less
```css=
h1 {
  color: red;
  div{
    color: green;
    width: 100+50px;
    height: 100-50px;
    border-width: 2*3px;
    // 除法寫法一(不推薦)
    margin: 20./2px;
    // 除法寫法二(推薦)
    font-size: (60/2)px;
  }
}
```
CSS
```css=
h1 {
  color: red;
}
h1 div {
  color: green;
  width: 150px;
  height: 50px;
  border-width: 6px;
  margin: 10px;
  font-size: 30 px;
}
```
# 聲明變量
## 普通情況
Less
```css=
@myColor:red;
h1 {
  color: @myColor;
  div{
    color: green;
  }
}
```
CSS
```css=
h1 {
  color: red;
}
h1 div {
  color: green;
}
```
## rgb轉換
Less
```css=
@myColor:rgb(255,0,0);
h1 {
  color: @myColor;
  div{
    color: green;
  }
}
```
CSS
```css=
h1 {
  color: #ff0000;
}
h1 div {
  color: green;
}
```
# 導入
one.less
```css=
h1 {
  color: red;
  div {
    color: green;
  }
}
```
style.less
```css=
@import "one.less";
h1 {
  color: blue;
  div{
    color: brown;
  }
}
```
style.css
```css=
h1 {
  color: red;
}
h1 div {
  color: green;
}
h1 {
  color: blue;
}
h1 div {
  color: brown;
}
```
# 導出
## 正常導出
注意!!!語法就是規定要用註釋寫，其實這樣真的有作用
```css=
// out: ./mycss/index.css
h1 {
  color: red;
  div {
    color: green;
  }
}
```
## 禁止導出
```css=
// out: false
h1 {
  color: red;
  div {
    color: green;
  }
}
```