BootStrap之基礎-5 BootStrap定製(LESS概述、LESS語法)

1、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

2、LESS語法

變量

  - 簡單變量

  - 用變量名定義變量

混合

  - 在一個樣式中調用另外一個樣式

  - 聲明

  - 調用

帶參混合

  - 像函數同樣定義一個帶參數的屬性集合

  - 聲明

  - 調用

  - @arguments變量

  - @arguments包含了全部傳遞進來的參數

  - 聲明

  - 調用

  - 模式匹配

  - 引導

嵌套規則

  - LESS 能夠讓咱們以嵌套的方式編寫層疊樣式

運算

  - 任何數字、顏色或者變量均可以參與運算

  - 數字

  - 顏色

  - 複合屬性

函數

  - Color函數

  - Math函數

命名空間

  - 聲明

  - 引用

做用域

  - 由內向外查找變量

註釋

導入

總結：本章內容主要介紹了  BootStrap定製(LESS概述、LESS語法)