# 基本介紹
## 必裝插件
## 註釋
單行註釋
ctrl + /
多行註釋
shift + alt + A
# 嵌套特性
## 基本嵌套
Less

h1 {
  color: red;
  div{
    color: green;
  }
}

CSS

h1 {
  color: red;
}
h1 div {
  color: green;
}

## &
&表示當前選擇器，大括號屬於誰就表示誰
應用:配合hover、active、nth-child

Less

h1 {
  color: red;
  div{
    color: green;
    a{
      cursor: pointer;
      &:hover{
        color: blue;
      }
    }
  }
}

CSS

h1 {
  color: red;
}
h1 div {
  color: green;
}
h1 div a {
  cursor: pointer;
}
h1 div a:hover {
  color: blue;
}

# 計算特性
Less

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

h1 {
  color: red;
}
h1 div {
  color: green;
  width: 150px;
  height: 50px;
  border-width: 6px;
  margin: 10px;
  font-size: 30 px;
}

# 聲明變量
## 普通情況
Less

@myColor:red;
h1 {
  color: @myColor;
  div{
    color: green;
  }
}

CSS

h1 {
  color: red;
}
h1 div {
  color: green;
}

## rgb轉換
Less

@myColor:rgb(255,0,0);
h1 {
  color: @myColor;
  div{
    color: green;
  }
}

CSS

h1 {
  color: #ff0000;
}
h1 div {
  color: green;
}

# 導入
one.less

h1 {
  color: red;
  div {
    color: green;
  }
}

style.less

@import "one.less";
h1 {
  color: blue;
  div{
    color: brown;
  }
}

style.css

h1 {
  color: red;
}
h1 div {
  color: green;
}
h1 {
  color: blue;
}
h1 div {
  color: brown;
}

# 導出
## 正常導出
注意!!!語法就是規定要用註釋寫，其實這樣真的有作用

// out: ./mycss/index.css
h1 {
  color: red;
  div {
    color: green;
  }
}

## 禁止導出

// out: false
h1 {
  color: red;
  div {
    color: green;
  }
}