常见的动态样式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文件