less語言:
1.簡介
1 什么是less?
Less 是一門CSS 預處理語言，使用了類似CSS的語法，為CSS賦予了動態語言的特征。它擴展了 CSS語言，增加了變量、Mixin(混合)、嵌套、函數和運算等特性，使 CSS 更易維護和擴展。此外，Less 可以運行在 Node 或瀏覽器端。
Boostrap的框架就是使用less和sass開發的，less類似于javascript ,? 作為css的一種擴展。
2 less的特點？
作為CSS的一種擴展，less不僅向下兼容CSS的語法，而且連新增的特性也是使用CSS語法。這樣的設置使得學習less非常輕松，而且你可以在任何時候回退到CSS。
LESS中文網 :http://www.lesscss.cn/
github :https://github.com/less/le
2.如何使用less?
方式一：客戶端直接調用
**
注意：必須在服務器環境中才能生效，動態編譯注入虛擬DOM或者內存中，類似ajax。
方式二：預編譯（提前編譯, 推薦）
1.在代碼編輯器中，按照LESS的語法規則寫好LESS文件；
2.使用編譯工具把.less文件編譯成.css文件；
3.把編譯后的css文件引入到頁面即可。
編譯工具：Koala
必須是文件夾,不能是純文件
3.方式一: 使用less
less 官網：http://lesscss.org//
github:https://github.com/less/less.js
1.項目引入less.js庫
2.引入.less樣式文件
執行的效果：
注意：必須在服務器環境中才能生效
webstrom自帶了一個本地服務器,直接在瀏覽器中打開沒有效果的
3.web開發常用的服務器組合
1.WAMP:? windows + apache + MySQL + PHP
2.LAMP:? Linux + apache + MySQL + PHP? ? (推薦)
3.MAMP:? Mac + apache + MySQL + PHP
4.less語法
1.變量
單獨定義一系列通用的樣式，然后在需要的時候去調用。所以在做全局樣式調整的時候我們可能只需要修改幾行代碼就可以了。
格式:@變量名:屬性值
2.變量的抽取
@import url('./base.less');
@import url('./base');
@import "./base";
@import "base";
變量的導入:
方式一不常用,因為要依賴服務器,在webstrom中打開,不可以直接在瀏覽器中打開,所以不常用
4.方式二使用less:
1.在代碼編輯器中，按照LESS的語法規則寫好LESS文件；
2.使用編譯工具把.less文件編譯成.css文件；
3.把編譯后的css文件引入到頁面即可。
1.安裝編譯工具
官網：http://koala-app.com/index-zh.html
下載需要翻墻
2.寫布局:
3.用less寫樣式:
4.使用koala把less文件變成css:
第一步：選擇less文件
第二步：
應該點擊Reload, 而不是Rename , 下圖框錯了
第三步：
5.引入less編譯生成的css文件:
6.less語法:
1.變量
bianliang的less內容
//1.定義變量
@color:white;
@size:20px;
@bgColor:red;
//2.使用變量
div,p{color: @color;
font-size: @size;
background-color: @bgColor;}
2.嵌套
在一個選擇器中嵌套另一個選擇器來實現繼承，這樣很大程度上減少了代碼量，并且代碼看起來更加清晰。
注意：嵌套一般情況下，不要超過3層
3.運算
運算提供了加、減、乘、除操作，其他復雜的運算交給函數；通常我們可以做屬性值和顏色的運算，這樣就可以實現屬性值之間的復雜關系。
注意：運算符與值之間必須以空格分開; 在運算的時候，只要有一個有單位就行,其實也可以不用空格
@width:300px;
@height:100px;
div{
//width: @width - 100;//可以
//width: @width - 200px ;//可以
//width: @width * 2;//可以
//width: @width * 3px;//可以
width: 500 - @width; //可以
height: @height;
background-color: red;}
4.混合-自定義函數
@width:300px;
@height:100px;
@color:green;
//混合
.createRadius(){
border-radius: 30px;}
div{
width: 500 - @width; //可以
height: @height;
background-color: red;
//引用
.createRadius();}
p{width: @width *2 ;
height: @height *2 ;
background-color: blue;
//引用
.createRadius();}
5.函數.自帶
LESS中的函數 - 映射了JavaScript函數代碼，如果你愿意的話，可以操縱屬性值。
比如：鼠標移上 , 透明度降50%。
需要查找的時候，直接查文檔就可以了。http://lesscss.cn/functions/#color-operations-fade
hsla 顏色? :http://www.cnblogs.com/zhoushengxiu/p/5710691.html
比如 , 顏色操作函數：
saturate(@color, 10%); // 飽和度增加 10%
desaturate(@color, 10%); // 飽和度降低 10%
lighten(@color, 10%); // 亮度增加 10%
darken(@color, 10%); // 亮度降低 10%
fadein(@color, 10%); // 透明度增加 10%
fadeout(@color, 10%); // 透明度降低 10%
fade(@color, 50%); // 設定透明度為 50%
spin(@color, 10); // 色相值增加 10
6.匹配
類似js中的if else判斷，只有模式名稱匹配成功才能起作用。
注意：匹配模式中,定義的模式名稱都是一樣的，只是參數不一樣，調用的時候只需選擇對應的參數就可以了。
@width:100px;
@height:30px;
.radius(@Radius:30px){
border-radius: @Radius;}
/*參數一：模式名稱 ； 參數二：變量*/
.radius(l_t,@Radius:30px){
border-top-left-radius: @Radius;}
.radius(l_b,@Radius:30px){
border-bottom-left-radius: @Radius;}
.radius(r_t,@Radius:30px){
border-top-right-radius: @Radius;}
.radius(r_b,@Radius:30px){
border-bottom-right-radius: @Radius;}
div{
width: @width; //可以
height: @height;
background-color: red;
margin: @height;}
/*四角圓*/
.test1{
.radius(10px);}
.test2{
.radius(l_t,10px);}
.test3{
.radius(l_b,10px);}
.test4{
.radius(r_b,10px);}
