輕鬆學會less語言

2021-10-01 19:38:05 字數 1438 閱讀 8854

// 一、變數

@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允許使用變數,可...