第一次在簡書上寫博客禀忆，這也是我的第一篇博客！
less我應(yīng)該是css的升級(jí)版了哈 _...好處懂的自然懂落恼！
less: css的動(dòng)態(tài)語言箩退，語法類似css，增加了很多實(shí)用的東西,如：變量佳谦、繼承戴涝、運(yùn)算、函數(shù)
更利于方便和編寫！
使用方式總的來說3種吧喊括！
1、工具的方式--Koala
官網(wǎng)：http://koala-app.com/index-zh.html矢棚，直接下來安裝即可(下載可能有點(diǎn)慢)
用法：
install完后郑什，項(xiàng)目目錄下建立.less文件，
將項(xiàng)目目錄拖拽到Koala工具中在設(shè)置中
可以將語言設(shè)置為中文的蒲肋，重啟下Koala即可
項(xiàng)目拖拽進(jìn)來蘑拯，會(huì)自動(dòng)讀取.less文件，
點(diǎn)擊顯示的文件兜粘，右下角點(diǎn)擊 '執(zhí)行編譯'申窘，
會(huì)在存放.less的目錄下生成.css文件，
index.html等頁面直接引用生成的.css文件
2孔轴、終端的使用方式--cnpm(我的是window32系統(tǒng))
node環(huán)境自己安裝下剃法，最好裝下淘寶鏡像，為以后下載東西都增加速度路鹰！
cnpm install less -g 全局安裝
檢查：lessc -version 簡寫 lessc -v
在項(xiàng)目目錄中寫好.less代碼后贷洲，然后使用命令來進(jìn)行編譯
Tip: Shift+右擊 選擇 '在此處打開命令窗口'
2-1、cd 到項(xiàng)目目錄：執(zhí)行 lessc css\index.less > css\index.css
2-2晋柱、cd到存放less文件目錄：執(zhí)行 lessc index.less index.css
參數(shù)：-x 輸出時(shí)對(duì).css進(jìn)行壓縮
--clean-css 還原為正常的css文件优构，方便查看
Tip:less編譯的時(shí)候，// 我是注釋 和 /*****我是注釋*****/雁竞，兩種的區(qū)別钦椭，
第一種編譯后會(huì)去除，第二種則不會(huì)被去除碑诉，可自行編譯查看.css文件
3彪腔、直接在頁面使用.less(需要配合less.js），來使用
<link rel="stylesheet/less" href="./css/index.less">
<script src="./assets/less.js"></script>
//這種會(huì)增加 http 的請(qǐng)求联贩，不是最好的漫仆，最好編譯后再去使用
//注：link 中 rel="stylesheet/less" 不要忘記寫 less！泪幌！哦盲厌，否側(cè)出不來
4、變量：
//聲明變量：
@min_w:100px;
@min_h:100px;
@orange:orange;
// 使用：
.div01{
width:@min_w;
height:@min_h;
background-color:@orange;
}
5祸泪、 混合：定義了一個(gè)border的樣式吗浩，class='div1' 去使用，class='div2'和div1的樣式是一樣的 直接就可以使用div1的樣式没隘，不同的自己寫
.div1{
width:@min-w;
height:@min-h;
background-color:@orange;
.border;
}
.border(){
border:solid 2px #353535;
}
.div2{
.div1;
margin-top:100px;
}
6懂扼、混合可帶參數(shù)(個(gè)人理解為：定義了一個(gè)函數(shù)，調(diào)用改函數(shù)的時(shí)候傳一個(gè)參數(shù)，根據(jù)參數(shù)來使用什么值)
.border_2(@border-color2:red){ // 類似定義一個(gè)函數(shù)
border:2px solid @border-color2;
}
.div3{
width:@min-width;
height:@min-height;
margin-top:10px;
.border_2(blue); // 這里調(diào)用函數(shù)阀湿，傳參數(shù)過去
}
7赶熟、匹配模式：根據(jù)接收的參數(shù)，來使用哪個(gè)樣式
如：7-1陷嘴、元素的定位
.position_rule(r,@bgColor:#0093dd){
position:relative;
}
.position_rule(a,@bgColor:#0093dd){
position:absolute;
}
.position_rule(f,@bgColor:#0093dd){
position:fixed;
}
.position_rule(@_,@bgColor:#0093dd){
width:200px;
height:120px;
background-color:@bgColor;
left:160px;
top:100px;
}
.position_div{
.position_rule(f,purple);
}
7-2映砖、 畫一個(gè)三角
.triangle_rule(top,@w:5px,@c:red){
border-width:@w;
border-color:transparent transparent @c transparent;
border-style:dashed dashed solid dashed;
}
.triangle_rule(bottom,@w:5px,@c:red){
border-width:@w;
border-color:@c transparent transparent transparent;
border-style:dashed dashed solid dashed;
}
.triangle_rule(left,@w:5px,@c:red){
border-width:@w;
border-color:transparent @c transparent transparent;
border-style:dashed dashed solid dashed;
}
.triangle_rule(right,@w:5px,@c:red){
border-width:@w;
border-color:transparent transparent transparent @c;
border-style:dashed dashed solid dashed;
}
.triangle_rule(@_,@w:5px,@c:red){
width:0;
height:0;
overflow:hidden;
margin:10px auto;
}
.triangle{
.triangle_rule2(right,20px);
}
Tip: @_ 是固定的格式，匹配方法下可以定義一些公用的樣式
8灾挨、運(yùn)算：+ - % / 變量可以進(jìn)行運(yùn)算邑退，px可以省略不寫，color 也是可以的劳澄，沒必要
@test_sum_w:200px;
@test_sum_h:100px;
.sums{
// width:@test_sum_w;
// height:@test_sum_h;
// background-color:#001203;
//不寫px 也是可以的
width:@test_sum_w+200px;
height:@test_sum_h+100;
background-color:#001203+120;
margin:10px auto;
}
9地技、嵌套：這個(gè)非常好用實(shí)用，父子關(guān)系看起來比較明確秒拔。
Tip: 可以使用 & 來代表 父元素(上一層選擇器)
//index.html
<div class="list-pro-help">
<ul class="list-pro">
<li><a href="#">Music-Name:<span>有種情懷叫趙雷</span></a></li>
<li><a href="#">Music01:<span>未給姐姐的信</span></a></li>
<li><a href="#">Music02:<span>吉姆餐廳</span></a></li>
<li><a href="#">Music03:<span>三十歲的女人</span></a></li>
</ul>
</div>
//index.less
.list-pro-help{
margin:10px;
.list-pro{
width:400px;
margin:10px auto;
border:1px solid #ccc;
padding:10px 10px;
background:rgba(220,140,89,0.6);
li{
border-bottom:1px dashed blue;
padding:10px 0px;
}
a{
text-decoration:none;
color:#353535;
&：hover{
color:red;
text-decoration:underline;
}
}
span{
font-size:20px;
color:green;
}
}
}
10莫矗、@arguments變量：類似調(diào)用函數(shù)時(shí)，所接收到的所有實(shí)參arguments
.box_rule(@s:1px,@t:solid,@c:#ccc){
border:@arguments;
}
.box1{
.box_rule();
}
處理如：box-shadow等
.box_rule(@shadow){
box-shadow:@shadow;
}
h3{
@help_rule:1px 1px 2px red;
.box_rule(@help_rule);
border:1px solid @ccc;
width:200px;
hieght:120p;
}
@help_rule 和 @shadow 是相等的砂缩，還有如：transition 趣苏、transform處理起來就簡單了
11、避免編譯：
如：css3種提供 calc() 方法 是讓瀏覽器去計(jì)算
.test02{
width:calc(300px-30px);
}
//這樣寫梯轻，進(jìn)過來less編譯后食磕，會(huì)直接的輸出結(jié)果，如何讓他不要被編譯呢
//輸出： .test02{width:270px}
.test02{
width:~'calc(300px-30px)'; //單/雙 引號(hào) 都可以
}
//輸出：.test02{width:calc(300px-30px);}
這樣可以做到 不讓less 去編譯一些東西喳挑。
End：
less官網(wǎng)：http://less.bootcss.com
慕課網(wǎng)推薦：http://www.imooc.com/learn/102
好了快學(xué)的也就這樣多了彬伦，真的是第一次寫博客，
不喜勿哈...…^_^ ,希望能有點(diǎn)幫助吧伊诵，
最近喜歡上了聽民謠--趙雷還是挺不錯(cuò)的单绑，
個(gè)人網(wǎng)站在努力的備案中..
form the Suns丶Boy ^_^
