- .border-radius (@radius: 5px) {
- border-radius: @radius;
- -moz-border-radius: @radius;
- -webkit-border-radius: @radius;
- }
- #header {
- .border-radius;
- }
Less 是一種樣式語言,它將 css 賦予了動態語言的特性,如變量、 繼承、 運算、 函數。less 既可以在客戶端上運行(支持IE 6+, Webkit, Firefox),也可以藉助 Node.js 或者 Rhino 在服務端運行。
Less 做爲 css 的一種形式的擴展,它並沒有閹割 css 的功能,而是在現有的 css 語法上,添加了很多額外的功能,所以對於前端開發人員來所,學習 less 是一件輕而易舉的事情。我們先看下用 less 寫的一段 css:
- @base: #f938ab;
- .box-shadow(@style, @c) when (iscolor(@c)) {
- box-shadow: @style @c;
- -webkit-box-shadow: @style @c;
- -moz-box-shadow: @style @c;
- }
- .box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
- .box-shadow(@style, rgba(0, 0, 0, @alpha));
- }
- .box {
- color: saturate(@base, 5%);
- border-color: lighten(@base, 30%);
- div { .box-shadow(0 0 5px, 30%) }
- }
在沒有學過 less 的情況下,我們並不知道這些代碼是做啥用的,怎麼生成我們所熟悉的 css 代碼,以上代碼經過 less 編譯後:
- .box {
- color: #fe33ac;
- border-color: #fdcdea;
- }
- .box div {
- box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
- -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
- -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
- }
下面我們就一起來學習 less 吧。
我們知道如果要使用 jquery 就必須在頁面上引進 jquery 庫,同樣的在使用 less 編寫 css 代碼時,也要引進 less 庫——less.js。點擊這裏下載 less 庫。
下載好後只要在頁面中引入就可以了
<link rel="stylesheet/less" type="text/css" href="style.less" media="all" /> <script type="text/javascript" src="less.js"></script> |
要注意外部引進樣式的方法有所改變,rel
屬性值爲 stylesheet/less,樣式的後綴變爲 .less 同時 less 樣式文件一定要在 less.js 前先引入。
引入了 less 之後,正式開始學習 less。
LESS 語法
1、變量
Less 的變量充許你在樣式中對常用的屬性值進行定義,然後應用到樣式中,這樣只要改變變量的值就可以改變全局的效果。和 javascript 中的全局變量有點類似。
甚至可以用變量名定義爲變量。
- @color: red;
- @foot: 'color';
- .head{
- color: @color;
- }
- .foot{
- color: @@foot;
- }
.head { color: red; } .foot { color: red; } |
注意 less 中的變量爲完全的“常量”,所以只能定義一次。
2、混合
混合就是定義一個 class,然後在其他 class 中調用這個 class。
- .common{
- color: red;
- }
- .nav{
- background: #ccc;
- .common;
- }
輸出:
- .common {
- color: red;
- }
- .nav {
- background: #ccc;
- color: red;
- }
Css 中的 class, id 或者元素屬性集都可以用同樣的方式引入。
3、帶參數混合
在 less 中,你可以把 class 當做是函數,而函數是可以帶參數的。
- .border-radius (@radius) {
- border-radius: @radius;
- -moz-border-radius: @radius;
- -webkit-border-radius: @radius;
- }
- #header {
- .border-radius(4px);
- }
- .button {
- .border-radius(6px);
- }
最後輸出:
- #header {
- border-radius: 4px;
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
- }
- .button {
- border-radius: 6px;
- -moz-border-radius: 6px;
- -webkit-border-radius: 6px;
- }
我們還可以給參數設置默認值:
.border-radius (@radius: 5px) { border-radius: @radius; -moz-border-radius: @radius; -webkit-border-radius: @radius; } #header { |
最後輸出:
#header { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } |
也可以定義不帶參數屬性集合,如果想要隱藏這個屬性集合,不讓它暴露到CSS中去,但是還想在其他的屬性集合中引用,就會發現這個方法非常的好用:
- .wrap () {
- text-wrap: wrap;
- white-space: pre-wrap;
- white-space: -moz-pre-wrap;
- word-wrap: break-word;
- }
- pre {
- .wrap
- }
輸出:
pre { text-wrap: wrap; white-space: pre-wrap; white-space: -moz-pre-wrap; word-wrap: break-word; } |
混合還有個重要的變量@arguments。
@arguments 包含了所有傳遞進來的參數,當你不想處理個別的參數時,這個將很有用。
- .border(@width:0,@style:solid,@color:red){
- border:@arguments;
- }
- .demo{
- .border(2px);
- }
輸出:
.demo { border: 2px solid #ff0000; } |
混合還有許多高級的應用,如模式匹配等。在這裏就不介紹了,只講些基礎的東西。
4、嵌套規則
Less 可以讓我們用嵌套的方式來寫 css。下面是我們平時寫的 css: