// 一、變數
@color:blue;
//二、混合(mixins)
.mixinsstyle
//三、對映
.maps()
//四、命名空間
.namespace()
}//五、巢狀
.wrap
//偽選擇器(&代表當前選擇器的父級)
&:hover
}//六、塊注釋以及行注釋。
//七、scope作用域
/*less 中的作用域與 css 中的作用域非常類似。首先在本地查詢變數和混合(mixins),如果找不到,則從「父」級作用域繼承。
@background:yellow;
.box
}與 css 自定義屬性一樣,混合(mixin)和變數的定義不必在引用之前事先定義。因此,下面的 less **示例和上面的**示例是相同的:*/
@background:yellow;
.box
@background:red ;
}
外部盒子1
外部盒子2
未滑動前:
滑動後:
1.在 node.js 環境中使用 less :
npm install -g less
lessc styles.less styles.css「匯入」的工作方式和你預期的一樣。你可以匯入乙個 .less 檔案,此檔案中的所有變數就可以全部使用了。如果匯入的檔案是 .less 副檔名,則可以將副檔名省略掉:
在html檔案中匯入。
@import 「library」; // library.less
2.在瀏覽器環境中使用 less :
less 是一門 css 預處理語言,它擴充了 css 語言,增加了諸如變數、混合(mixin)、函式等功能,讓 css 更易維護、方便製作主題、擴充。
本文主要介紹less檔案如何轉化為css檔案。
首先,你要確認你的電腦已經安裝了node。
使用 npm 安裝 less,命令列:
npm install -g less
然後,進入需要轉換的less檔案的目標位置。
最後,你只需輸入以下兩條命令:
npm install -g less
lessc less檔名.less 生成的css檔名.css
此時再看你的資料夾,是不是已經有了對應的css檔案了呢~
如有錯誤,請您指正!
具體參考:
輕鬆學會C語言鍊錶之 「尾新增」 和 「遍歷」
include include 節點結構體 struct node 鍊錶頭尾指標 struct node g phead null struct node g pend null 建立鍊錶,在鍊錶中增加乙個資料 尾新增 void addnodetolist int a 遍歷鍊錶 void scanf...
十分鐘學會less
譯者 wleonardo 我們都知道在大型的專案中,當css有數千行 的時候,css的編寫有一些麻煩。我們經常會出現複製相同的 到不同的地方或者通過我們的編輯器來替換所有相同的顏色。這需要我們費很大的力氣去保持css的可維護性。但是其實我們並不是一定要這樣。幸運的是,web開發社群已經解決了這個問題...
動態樣式語言 LESS
less作為css語言的擴充套件,賦予了css動態語言的特性,如 變數,繼承,運算,函式等。如果你原本就是程式設計師,你一定會非常喜愛less,它可以幫你節省很多重複工作,可以讓你像編寫一門動態語言一樣地編寫css。本文總結了less的相關語法和使用方式,可供查閱和入門使用。less允許使用變數,可...