CSS3——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

1、Less

1.一、概要

Less是一种动态样式语言，Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增长了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数。LESS 既能够在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也能够借助Node.js或者Rhino在服务端运行。 Less是一个JS库，因此他能够在客户端运行，相对Sass则必须在服务端借助Ruby运行

官网： http://lesscss.org

1.二、解析Less

 

1.2.0、插件安装

 

a)、先安装node.js(https://nodejs.org/en/)

b)、安装less编译器

c)、安装插件

1.2.一、插件安装

可以翻译Less的工具软件有很多，这里介绍：Koala

Koala是一个开源的预处理语言图形编译工具，目前已支持Less、Sass、Compass与CoffeeScript。
功能特性：
多语言支持： 支持Less、Sass、Compass与CoffeeScript。
实时监听与编译： 在后台监听文件的变更，检测到文件被修改后将自动进行编译。
编译选项支持： 能够设置与自定义你须要的编译选项。
压缩支持： Less、Sass可直接编译生成压缩后的css代码。
错误提示： 编译中若是遇到错误，Koala将在右下角提示并显示出具体的出错地方，方便开发者快速定位。
跨平台： Windows、Mac、Linux完美支持。
安装Koala
在Koala官网根据你的系统平台下载对应的版本。Linux系统要求已安装好ruby运行环境。

下载地址： http://koala-app.com/

注意：路径中不要使用中文，切记！

 

 

1.三、变量

语法：@变量名:值;

1)、以@做为变量的起始标识，变量名由字母、数字、_和-组成
2)、没有先定义后使用的规定；
3)、以最后定义的值为最终值；
4)、可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；
5)、定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；
6)、存在做用域，局部做用域优先级高于全局做用域。

@width:300px;       //建立变量：@变量名:值
@height:@width/2;

.dox{
    width: @width;      //赋值
    height: @height;
}

@width:200px;       //后写的会覆盖先写的

.dox{
    width: @width;  //屡次解析
}

 

 

编译后：

.dox {
  width: 200px;
  height: 100px;
}
.dox {
  width: 200px;
}

 

1.四、混入(Mixins)

相似函数或宏

定义函数:函数名(参数1,参数2,...)

参数       :@参数名:默认值

注意：

a)、能够不使用参数 .wrap(){…} .pre{ .wrap }，也可使用多个参数
b)、内置变量@arguments表明全部参数(运行时)的值 .boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ box-shadow: @arguments; }

注意，在参数没有默认值的前提下使用@arguments调用时必须赋值，不然会致使整个页面内的less语法出错而失效。
c)、Mixins必须使用ID或者类，即#xx或.xx，不然无效。

Less示例代码：

/*1.四、混入(Mixins)
* 定义函数:.mixins(参数1,参数2,...)
* 参数 :@参数名:默认值
* */
.mixins(@w:200px,@h:200px,@c:royalblue){
　　width: @w;
　　height: @h;
　　color: @c;
}
.mixins2(@x:0, @y:0, @blur:1px, @color:#000) {
　　box-shadow: @arguments;//@arguments:全部参数
}

/*调用*/
.dox1{
　　.mixins();//默认值
}
.dox2{
　　.mixins(100px,50px,red);//带参数
}

.dox3{
　　.mixins2(10px,5px,3px,#665544)
}

 

编译后：

/*
 * 定义函数:.mixins(参数1,参数2,...)
 * 参数       :@参数名:默认值
 * */
/*调用*/
.dox1 {
  width: 200px;
  height: 200px;
  color: royalblue;
}
.dox2 {
  width: 100px;
  height: 50px;
  color: red;
}
.dox3 {
  box-shadow: 10px 5px 3px #665544;
}