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

  - 在客户端使用

      - 引入样式文件

       

      - 添加脚本文件

       

      - 添加MIME

  - 在服务器端使用

      - 安装LESS

        $ npm install less@latest

      - 使用

        $ lessc style.less > style.css


二、LESS语法


变量

  - 简单变量

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第1张图片

  - 用变量名定义变量

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第2张图片


混合

  - 在一个样式中调用另一个样式

  - 声明

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第3张图片

  - 调用

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第4张图片


带参混合

  - 像函数一样定义一个带参数的属性集合

  - 声明

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第5张图片

  - 调用

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第6张图片  - @arguments变量

  - @arguments包含了所有传递进来的参数

  - 声明

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第7张图片

  - 调用

wKiom1cEuhOALIjYAAANn_uBVuU617.png

  - 模式匹配

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第8张图片

  - 引导

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第9张图片


嵌套规则

  - LESS 可以让我们以嵌套的方式编写层叠样式

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第10张图片


运算

  - 任何数字、颜色或者变量都可以参与运算

  - 数字

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第11张图片

  - 颜色

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第12张图片

  - 复合属性

wKiom1cEuvaB5CRlAAA8NFADI9U885.png


函数

  - Color函数

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第13张图片

  - Math函数

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第14张图片


命名空间

  - 声明

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第15张图片

  - 引用

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第16张图片


作用域

  - 由内向外查找变量

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第17张图片


注释

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第18张图片


导入

BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)_第19张图片



总结：本章内容主要介绍了  BootStrap定制(LESS概述、LESS语法)