less快速入門

less快速入門

通過less.js讓less不再像傳統的css是靜态資料表，讓它具備了程式設計語言的動态性。

得益于Variables(變量)和Mixins()讓less可以做到程式設計語言很多的基礎和實用特性，這将大大減少前端的代碼量，使用代碼變得更加優雅小巧。

官網：http://lesscss.org/

官網對less的解釋：css的變體，通過less.js進行轉換成css

本文内容來源于英文官網加上自己的閱讀筆記。

讓css成為程式設計語言最基礎最核心的功能，變量

Mixins把一串屬性包括起來，PS.把including 翻譯成中文的包括 确實有些怪怪的

根據官網提供的demo，結合我自身的了解，我把它叫它可複用樣式屬性

在此處定義一段樣式代碼屬性名叫 .bordered

在其它地方通過引用.bordered()就相當于引用了上處定義的樣式

在CSS中對于子項文法我們需要這樣寫

而在less可以嵌套寫（PS.這是文法糖？）

通過""或‘’ 中單插入任務字元串作屬性和變量，便可轉換成熟悉的css

轉換後css如下

less提供多種函數，比如 transform color，字元串操作，數學運算

示例：

轉成百分比，把0.5 變成50%

設定顔色飽和度為5%

使用顔色lightened(變亮)25%，spun(旋轉)8度

(Not to be confused with CSS @namespace or namespace selectors).

不要困惑 css中提供的@namespace 或 namespace 選擇器

官方此話的意思應該是less中namespace和css是不一樣的。

當在團隊合作中要對某個功能進行封裝，或對外提供sdk，less提供了命名空間。

注意：需要在namespace後使用()，比如#bundle()，

然後在某處需要使用.button的樣式，我們可以這樣調用

less3.5版本支援Maps，可以定義maps

輸出結果

less和css類似，先從local查找變量，如果無則往 parent 查找。

// 單行

/**/ 多行注釋

@import關鍵字可以在less的任意位置使用，它可以導入*.less可以導入css