//看的一個視頻整理的，貌似是尚硅谷
//入門很簡單，而且很有用，最近的代碼一直在用less寫。
//個人認爲最重要的特點是嵌套，這樣整個網頁的結構就會被把握的很好。
less要點：變量，混合，嵌套，函數&運算，擴展
1、鏈接<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
<script src="https://cdn.bootcss.com/less.js/3.0.2/less.js"></script>
2、註釋
/*塊註釋*/
//行註釋（不會輸出到編譯後的css文件中）
3、變量（Less中的變量充許你在樣式中的某個地方對常用的值進行定義，然後應用到樣式中，這樣只要改變你定義的變量參數值就可以了）
//延遲加載：全局唯一，多次定義，只使用最後一個
//@開頭
//選擇器和屬性名 @{color}
//url @{url}
eg:
@color: #4d926f;//然後之後就可以用了
background:url('@{img}/widget.png') no-repeat;
計算功能：可計算//只要一個加單位就好
height:@height+11
4、嵌套
在一個選擇器中嵌套另一個選擇器來實現繼承
&（當前選擇器的父選擇器）
div {
&:hover{
color:yellow;
}
p{
color:darkturquoise;
}
}
5、混合（Mixin）
//從一個規則集引入另一個規則集
//和擴展很類似，一個是定義子類，一個是定義父類
//試了一下，選擇器前面必須帶# 或者 .
1）無括號//會帶到css中
2）有括號無參數
//特殊（）不會帶到css
@color: pink;
#pp() {
color: blue
}
div {
#pp();
}
(//帶一些參數)
3）參數
.pp(@color,@w) {
color: @color;
font-size: @w;
}
div {
.pp(red,30px)
}
4）默認值
.pp(@color,@w:40px) {
color: @color;
font-size: @w;
}
div {
.pp(red)
}
5）命名參數
.pp(@color,@w:40px) {
color: @color;
font-size: @w;
}
div {
.pp(@color: red)
5）匹配模式
.pp(@_,@c){//公共部分，第一個參數爲@_
background: darkturquoise;
}
.pp(L,@c){//第一個參數不帶@，用來匹配
color: @c;
font-size:30px
}
.pp(R,@c){
color: @c
}
div {
.pp(L,@c:red)
}
6）arguments（語法糖）//定義時，一個變量代替所有參數
6、擴展
extend
&:extend(.inline);//增加一個父類
9、避免編譯
width:~' calc(100% - 35)';