常见的动态样式css语言之less
1.动态样式语言
CSS：静态样式语言，作为一门语言并不称职！缺少一般语言必需的基本要素：变量、运算、循环/选择、函数等，导致了CSS代码的修改和维护非常麻烦。
动态样式语言：在CSS的基础之上，添加了动态语言所必需的元素，如变量、运算、循环/选择、函数等，方便样式文件的修改和维护。
注意：浏览器默认只能处理静态样式语言，所有的动态样式语言必需设法转换为CSS才能被浏览器所理解！这个转换操作称为“编译”。
常见的动态样式语言：
(1)Sass/SCSS
(2)Stylus
(3)Less
3.Less的使用
是一种 动态 样式 语言.
LESS 为 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数。 LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。
(1)运行方式1：在客户端运行Less转换程序——了解
在HTML中引入xx.less，同时再引入一个less.js——就是一个可以运行在客户端浏览器中的less编译程序——效率太低，不推荐使用。
(2)运行方式2：在服务器端运行Less转换程序——推荐
步骤：
1)下载并安装一款服务器端的JS解释器——NodeJS或者Rhino
2)下载less文件的转换程序（lessc-Compiler）——一个JS脚本
3)在服务器端JS解释器中运行lessc转换器，把自己编写的.less文件转换为.css文件
a)方式1：可以在命令行中使用转换程序
node.exe lessc my.less my.css
b)方式2：可以在WebStorm中使用转换程序
4)继续编写HTML文件，引用编译得到的.css文件即可。
4.Less语法学习
(1)Less完全支持CSS的所有语法
(2)Less支持单行和多行注释，但只有多行注释会被转换到css文件中
(3)Less支持变量(Variable)
语法：@变量名: 值;
使用：.class { 样式： @变量名; }
(4)Less支持样式混合(Mixin)——在一个样式中混入另一个样式
语法： .class1{ ... }
.class2{
...
.class1;
...
}
(5)带参混合
语法： .class1(@参数1, @参数2, ...){ ... }
.class2{
...
.class1(值1， 值2, ...);
...
}
(6)嵌套规则
语法：.class1 {
....
.class2 { ... }
}
转换的结果： .class1 { ... }
.class1 .class2 { ... }
(7)Less可以对变量、常量进行算术运算
语法： 变量/值 +-*/ 变量/值
(8)Less为样式提供了几十个应用函数
lighten(颜色，亮度值)：将指定的颜色变亮指定的百分比
darken(颜色，亮度值)：将指定的颜色变暗指定的百分比
floor(数字)：对数值进行下取整
ceil(数字)：对数值进行上取整
(9)页面导入
尽量避免使用CSS文件中的@import指令——会增加HTTP请求次数；
为了可以将一个样式文件拆分为多个小的样式文件，由多人同时编写，可以使用LESS中的@import——less中导入其他less文件，转换时会拼接为一个大的完整的CSS样式文件，故推荐在Less中@import其他的Less文件。
语法： @import "xx.less";
@import "yy";
================示例：大型项目中的less文件结构=============
variables.less 放置所有的变量
mixin.less 放置所有的混合
reset.less 放置HTML元素重置样式
navbar.less 导航条相关样式
footer.less 页脚相关样式
....
jd.less => jd.css 总样式文件 一大堆@import
=================================================
5.通过修改Bootstrap的Less源文件实现样式定制
定制的目标：
(1)删除不需要的样式，如轮播广告、模态框...
在bootstrap.less文件中，注释掉不需要的@import即可。
(2)定制需要的组件的默认样式，如修改导航条的默认背景色
修改variables.less文件中的变量即可。
(3)在Bootstrap提供的默认样式基础上创建新样式，如定制dropdown中的divider的样式——组件的深度定制
修改某个组件所对应的.less文件