//引入外部less檔案
<link rel="stylesheet/less" type="text/less" href="./styles/index.less">  //要手動修改rel="stylesheet/less"不然會報錯

//因為預設的rel="stylesheet" mime型別是text/css,而不是text/less
//注意：即使改了type="text/less"也沒用，因為這只是輔助說明引入的檔案是less型別，並不起什麼作用。
//只有改了rel="stylesheet/less"才能識別less型別檔案

 <!-- 轉換less->css的js檔案 -->
    <script src="../../工具/less-3.12.2.js"></script>

混入

//混入
.one{
    color: teal;
}
body{
    //使用
    .one()
}

加成乘除規律

    font-size: 30px+10;  //40px
    font-size: 5cm+10mm;  //6cm
    font-size: 30px+10rem;  //40px
    font-size: 30px+10cm;  //407.952755px

    font-size: 3rem+10;  //13rem
    font-size: 3rem+10px;  //13rem
    font-size: 10+10px;  //20px

    font-size: 2+5px+3cm;  //-106.385826px

總結：

m，n都為絕對單位，轉換後在相加

m,n有一個相對單位，一個絕對，左邊為準

m,n只有一個為單位，有單位的為準

巢狀

body{
    //body>a()  報錯

    //巢狀 body div
    div{color: red;}

    //&代表當前選擇器 現在為body 
    &>a{color: black};
    &:hover{};
    &>a>a{  }
}

body{
    div{
        &>*{
            &:first-child{
                span{
                    color: blue;
                }
            }
        }
    }
}

//編譯出來是 body div>*:first-child span{}

@規則

   @規則會提前到選擇器外面，只有@規則會往外調，其他的順序不變

// @min768:(min-width:768px);   //新版本
@min768:~"(min-width:768px)";  //舊版本

.component {
  width: 300px;
  @media @min768 {
    width: 600px;
    @media  (min-resolution: 192dpi) {
      background-image: url(/img/retina2x.png);
    }
  }
}

編譯為：
.component {
  width: 300px;
}
@media (min-width: 768px) {
  .component {
    width: 600px;
  }
}
@media (min-width: 768px) and (min-resolution: 192dpi) {
  .component {
    background-image: url(/img/retina2x.png);
  }
}

函式

 if函式：條件，true，false

div{
    &:before{
        content: if((5>3),'hello','world');
    }
}

 color("#aaa")   解析顏色，將代表顏色的字串轉換為顏色值

@mycolor:'#ccc';  //這是字串,
// div{
//     color:@mycolor;     //如果不轉的話會解析成color:'#ccc'
       color:color(@mycolor);   //color:#ccc
// }

each(列表/規則集，遍歷規則) 

//@key @value @index  1開始
列表 key=index,value是內容
css規則集  key是屬性名,value是屬性值 

@list:range(5,12,3);  //範圍函式，引數：開始，結束，步長

//生成選擇器宣告塊
// each(@list,{
    //選擇器宣告要包{ }
//     .col-@{value}{
           //屬性值的話直接放 
//         width: @value;
//     }
// })

//生成css規則
div{
    each(@list,{
        my-@{value}:@key
    })
}

  ceil(num)               向上取整
  floor(num)             向下取整
  percentage(num)  將浮點數轉換為百分比字串。
  round(num)           四捨五入取整
  pi()                          返回圓周率 π (pi);
  min(5, 10);             最小值
  max(5, 10);            最大值
  boolean(3<5)        返回boolean值

div{
    color:color(@mycolor);

    font-size:seil(12.4px);  //13px
    font-size:floor(12.4px);  //12px
    font-size:round(12.4px);  //12px

    height: pi()*10px;  //31.41592654px
    width: min(12px,4px,5px)  //4px
    width: max(12px,4px,5px)  //12px
}

名稱空間

看起來像一個函式，名稱空間的資料可以複用

//在空間裡放選擇器和宣告規則

//名稱空間 #one(){ }
#one(){
    .red{
        color:red
    };
    .blue{
        color: blue;
    }
}
div{
    //訪問名稱空間 名稱空間名+選擇器名
    #one.red();
}

//混入會轉換到css中，名稱空間不會轉換到css中

//名稱空間
#one(){
    .red{color:red};
    .blue{color: blue;}
}
div{#one.red();}

----編譯成----
div{color: red;}      //只會再使用的地方轉義

********************************************
//混入
#one{
    .red{color:red};
    .blue{color: blue;}
}
div{#one.red();}

---編譯成-----
#one .red {color: red;}
#one .blue {color: blue;}    //混入被編譯了
div {color: red;}

對映

//在名稱空間裡放規則，沒有放選擇器，有點屬性的意思。可以理解為是名稱空間的兒子吧

//對映
.one(){
    mya:'red';
    myb:'blue'
}

div{
    //使用
    color:.one[mya];
    background-color: .one[myb];
    // background-color: color(.one[myb]);
}

作用域

花括號內可以放任何東西，each函式、變數等

@var:red;
#page{
    @var:white;
    #header{
        color:@var;  //white
    }
//  @var:white;   //在作用域內，放哪都一樣
}

匯入

@import  '8-mo';     //相當於 8-mo.less