coffeescript html5,HTML5——前端预处理技术（Less、Sass、CoffeeScript）
一、Less
1.1、概要
Less是一種動態樣式語言，Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增加了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。
Less 將 CSS 賦予了動態語言的特性，如 變量， 繼承， 運算， 函數。LESS 既可以在 客戶端 上運行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服務端運行。 Less是一個JS庫，所以他可以在客戶端運行，相對Sass則必須在服務端借助Ruby運行
1.2、變量
語法：@變量名:值;
1)[email?protected]，變量名由字母、數字、_和-組成
2)、沒有先定義后使用的規定；
3)、以最后定義的值為最終值；
4)、可用于rule值、rule屬性、rule屬性部件、選擇器、選擇器部件、字符串拼接；
5)、定義時 "@變量名: 變量值;" 的形式；引用時采用 "@變量名" 或 "@{變量名}" 的形式；
6)、存在作用域，局部作用域優先級高于全局作用域。
@color: #4d926f;
#header{color:@color; }#header{color:#4d926f; }@color: #253636;
@color: #ff3636; //覆蓋第一次的定義
#header{color:@color;}//多次反復解析
#header{color:#ff3636;}
編譯后：
#header{color:#ff3636;
}#header{color:#4d926f;
}#header{color:#ff3636;
}#header{color:#ff3636;
}
方法：使用工具軟件
能夠翻譯Less的工具軟件有不少，這里介紹：Koala
Koala是一個開源的預處理語言圖形編譯工具，目前已支持Less、Sass、Compass與CoffeeScript。
功能特性：
多語言支持： 支持Less、Sass、Compass與CoffeeScript。
實時監聽與編譯： 在后臺監聽文件的變動，檢測到文件被修改后將自動進行編譯。
編譯選項支持： 可以設置與自定義你需要的編譯選項。
壓縮支持： Less、Sass可直接編譯生成壓縮后的css代碼。
錯誤提示： 編譯中如果遇到錯誤，Koala將在右下角提示并顯示出具體的出錯地方，方便開發者快速定位。
跨平臺： Windows、Mac、Linux完美支持。
安裝Koala
在Koala官網根據你的系統平臺下載對應的版本。Linux系統要求已安裝好ruby運行環境。
注意：路徑中不要使用中文，切記！
二、Sass(比less好用)
Sass與Less類似類似也是一種CSS的預編譯語言，他出現的更晚，但功能更加強大，Sass 有兩種語法。 第一種被稱為 SCSS (Sassy CSS)，是一個 CSS3 語法的擴充版本；第二種比較老的語法成為縮排語法(或者就稱為 "Sass")， 提供了一種更簡潔的 CSS 書寫方式特點如下：
特點：
1)、不能直接在頁面中解析，需要使用ruby預先翻譯成css文件，而Less可以在線動態翻譯。
2)、Sass功能更加強大，擁有流控語句等Less不具備的功能
3)、完全兼容 CSS3，在 CSS 語言基礎上添加了擴展功能，比如變量、嵌套 (nesting)、混合 (mixin)
在使用時Sass的后綴名為scss，本文全部使用scss的語法，可以安裝Koala直接解析，不需要去搭建ruby環境，Koala已封裝好。
2.1、變量
sass中可以定義變量，方便統一修改和維護
Sass代碼：
/*變量*/$width:1004px;
$color:blue;
.cls11{width:$width;height:$width/2;background:$color;
}$width:100px;
$color:red;
.cls12{$color:green;width:$width;height:$width/2;background:$color;
}
編譯后：
.cls11{width:1004px;height:502px;background:blue; }.cls12{width:100px;height:50px;background:green; }
2.2、嵌套
sass可以進行選擇器的嵌套，表示層級關系，看起來很優雅整齊。
Sass代碼：
.cls21{width:100px;.cls22{
height:200px;
}.cls23{color:blue;
}}
編譯后：
.cls21{width:100px;
}.cls21 .cls22{height:200px;
}.cls21 .cls23{color:blue;
}
2.4、mixin 混入
sass中可用mixin定義一些代碼片段，且可傳參數，方便日后根據需求調用。從此處理css3的前綴兼容輕[email?protected]，[email?protected]
SCSS樣式：
@mixin circle($size:100px,$color:lightblue){width:$size;height:$size;border-radius:$size/2;background:$color;
}.cls41{@include circle();}.cls42{@include circle(150px);}.cls43{@include circle(200px,lightgreen);}
編譯后：
.cls41{width:100px;height:100px;border-radius:50px;background:lightblue;
}.cls42{width:150px;height:150px;border-radius:75px;background:lightblue;
}.cls43{width:200px;height:200px;border-radius:100px;background:lightgreen;
}
2.5、擴展/繼承
SCSS樣式：
.state{background:blue;border:1px solid lightblue;
}.success{@extend .state;
background:green;
}.error{@extend .state;
border:2px solid red;
}
CSS樣式：
.state,
.success,
.error{background:blue;border:1px solid lightblue;
}.success{background:green;
}.error{border:2px solid red;
}
2.7、函數
sass中集成了大量的顏色函數，讓變換顏色更加簡單。
SCSS樣式：
$pcolor: #999ccc;
.cls71 a{color:$pcolor;&:hover {
background: darken($pcolor,15%);
/*變暗15%*/color:lighten($pcolor,5%);
/*變亮5%*/
}
編譯后：
.cls71 a{color:#999ccc;
}.cls71 a:hover{background:#666bb3;color:#aaacd5;
}
2.8、流程控制
sass中和其它程序語言一樣也擁有流程控制語句，如if，for，each，while，指令，函數等。
SCSS樣式：
$blur: lightblue;
@for $i from 1 through 10{.font-#{$i} {
/*計算字體大小*/font-size:12px+$i*2px;
/*顏色變暗*/color:darken($blur,$i*2);
/*如果i是3的倍數，則下劃線*/@if $i%3==0 {
text-decoration:underline;
}}
}
CSS樣式：
/*8*/.font-1{font-size:14px;color:#a5d4e4; }.font-2{font-size:16px;color:#9dd1e1; }.font-3{font-size:18px;color:#96cddf;text-decoration:underline; }.font-4{font-size:20px;color:#8ec9dc; }.font-5{font-size:22px;color:#86c5da; }.font-6{font-size:24px;color:#7ec2d8;text-decoration:underline; }.font-7{font-size:26px;color:#76bed5; }.font-8{font-size:28px;color:#6ebad3; }.font-9{font-size:30px;color:#67b7d1;text-decoration:underline; }.font-10{font-size:32px;color:#5fb3ce; }
三、CoffeeScript
javascript變得日益重要，但有很多明顯的缺點，借助一種中間語言轉譯出優雅的javascript是解決這些問題的方法。如CoffeeScript，TypeScript。
Coffee Script是JavaScript的轉譯語言。
Coffee的特點：
CoffeeScript語法類似 Ruby ，可以被編譯成 JavaScript
CoffeeScript取JavaScript之精華，而拋棄了諸如全局變量聲明、with等容易出錯的部分
CoffeeScript是JavaScript與程序員之間的橋梁，程序員看到的是優雅的CoffeeScript接口，使得編程更簡潔，寫法更隨意
更少，更緊湊，和更清晰的代碼
通過規避和改變對JavaScript中不良部分的使用，只留下精華，讓代碼減少出錯率，更容易維護
在很多常用模式的實現上采用了JavaScript中的最佳實踐
CoffeeScript生成的JavaScript代碼都可以完全通過JSLint的檢測
原文：http://www.cnblogs.com/zhangyongl/p/6145433.html
總結
以上是生活随笔為你收集整理的coffeescript html5,HTML5——前端预处理技术（Less、Sass、CoffeeScript）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C语言程序设计基础练习题
- 下一篇： css 高度塌陷_web前端入门到实战：