一、LESS概述
LESS概述
- 動態樣式語言
- LESS 將 CSS 賦予了動態語言的特性
- 變量、繼承、運算、函數
- LESS 既可以在 客戶端上運行
- 也可以藉助Node.js或者Rhino在服務端運行
- 變量
- @color: #4D926F;
- h2 { color: @color; }
- 混合
- .myStyle{}
- H2{ .myStyle }
- 嵌套規則
- #header{h1{} p{a{}}}
- 函數&運算
- @color:#aabbcc; #header{ color: @color+#111; }
使用LESS
- 在客戶端使用
- 引入樣式文件
<link rel="stylesheet/less" type="text/css" href="style.less">
- 添加腳本文件
<script src="less.js" type="text/javascript"></script>
- 添加MIME
- 在服務器端使用
- 安裝LESS
$ npm install less@latest
- 使用
$ lessc style.less > style.css
二、LESS語法
變量
- 簡單變量
- 用變量名定義變量
混合
- 在一個樣式中調用另一個樣式
- 聲明
- 調用
帶參混合
- 像函數一樣定義一個帶參數的屬性集合
- 聲明
- 調用
- @arguments變量
- @arguments包含了所有傳遞進來的參數
- 聲明
- 調用
- 模式匹配
- 引導
嵌套規則
- LESS 可以讓我們以嵌套的方式編寫層疊樣式
運算
- 任何數字、顏色或者變量都可以參與運算
- 數字
- 顏色
- 複合屬性
函數
- Color函數
- Math函數
命名空間
- 聲明
- 引用
作用域
- 由內向外查找變量
註釋
導入
總結：本章內容主要介紹了 BootStrap定製(LESS概述、LESS語法)