一、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语法)
本文出自 “会飞的蚂蚁” 博客，谢绝转载！
BootStrap之基础-5 BootStrap定制(LESS概述、LESS语法)
原文地址：http://jasonteach.blog.51cto.com/5192112/1760926
