首页 > 代码库 > HTML5——前端预处理技术(Less、Sass、CoffeeScript)
HTML5——前端预处理技术(Less、Sass、CoffeeScript)
一、Less
1.1、概要
Less是一种动态样式语言,Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量、Mixin、函数等特性,使 CSS 更易维护和扩展。
Less 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数。LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行。 Less是一个JS库,所以他可以在客户端运行,相对Sass则必须在服务端借助Ruby运行
中文网站: http://www.lesscss.net/
英文官网: http://lesscss.org
less源码: https://github.com/cloudhead/less.js
github地址: https://github.com/less/less.js
1.2、变量
语法:@变量名:值;
1)、以@作为变量的起始标识,变量名由字母、数字、_和-组成
2)、没有先定义后使用的规定;
3)、以最后定义的值为最终值;
4)、可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接;
5)、定义时 "@变量名: 变量值;" 的形式;引用时采用 "@变量名" 或 "@{变量名}" 的形式;
6)、存在作用域,局部作用域优先级高于全局作用域。
@color: #4d926f; #header { color: @color; }#header { color: #4d926f; }@color: #253636; @color: #ff3636; //覆盖第一次的定义#header {color: @color;} //多次反复解析#header {color: #ff3636;}
编译后:
#header { color: #ff3636;}#header { color: #4d926f;}#header { color: #ff3636;}#header { color: #ff3636;}
方法:使用工具软件
能够翻译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/
注意:路径中不要使用中文,切记!
二、Sass(比less好用)
Sass与Less类似类似也是一种CSS的预编译语言,他出现的更晚,但功能更加强大,Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS),是一个 CSS3 语法的扩充版本;第二种比较老的语法成为缩排语法(或者就称为 "Sass"), 提供了一种更简洁的 CSS 书写方式特点如下:
特点:
1)、不能直接在页面中解析,需要使用ruby预先翻译成css文件,而Less可以在线动态翻译。
2)、Sass功能更加强大,拥有流控语句等Less不具备的功能
3)、完全兼容 CSS3,在 CSS 语言基础上添加了扩展功能,比如变量、嵌套 (nesting)、混合 (mixin)
在使用时Sass的后缀名为scss,本文全部使用scss的语法,可以安装Koala直接解析,不需要去搭建ruby环境,Koala已封装好。
下载地址: http://koala-app.com/
2.1、变量
sass中可以定义变量,方便统一修改和维护
Sass代码:
/*变量*/$width:1004px;$color:blue;.cls11{ width: $width; height: $width/2; background: $color;}$width:100px;$color:red;.cls12{ $color:green; width: $width; height: $width/2; background: $color;}
编译后:
.cls11 { width: 1004px; height: 502px; background: blue; }.cls12 { width: 100px; height: 50px; background: green; }
2.2、嵌套
sass可以进行选择器的嵌套,表示层级关系,看起来很优雅整齐。
Sass代码:
.cls21 { width: 100px; .cls22{ height: 200px; } .cls23 { color:blue; }}
编译后:
.cls21 { width: 100px;}.cls21 .cls22 { height: 200px;}.cls21 .cls23 { color: blue;}
2.4、mixin 混入
sass中可用mixin定义一些代码片段,且可传参数,方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。定义时使用关键字@mixin,调用时使用@include
SCSS样式:
@mixin circle($size:100px,$color:lightblue){ width: $size; height: $size; border-radius: $size/2; background: $color;}.cls41{ @include circle();}.cls42{ @include circle(150px);}.cls43{ @include circle(200px,lightgreen);}
编译后:
.cls41 { width: 100px; height: 100px; border-radius: 50px; background: lightblue;}.cls42 { width: 150px; height: 150px; border-radius: 75px; background: lightblue;}.cls43 { width: 200px; height: 200px; border-radius: 100px; background: lightgreen;}
2.5、扩展/继承
sass可通过@extend来实现代码组合声明,使代码更加优越简洁。
SCSS样式:
.state{ background: blue; border: 1px solid lightblue;}.success{ @extend .state; background: green;}.error{ @extend .state; border: 2px solid red;}
CSS样式:
.state,.success,.error { background: blue; border: 1px solid lightblue;}.success { background: green;}.error { border: 2px solid red;}
2.7、函数
sass中集成了大量的颜色函数,让变换颜色更加简单。
SCSS样式:
$pcolor: #999ccc;.cls71 a { color: $pcolor; &:hover { background: darken($pcolor,15%); /*变暗15%*/ color: lighten($pcolor,5%); /*变亮5%*/ }
编译后:
.cls71 a { color: #999ccc;}.cls71 a:hover { background: #666bb3; color: #aaacd5;}
2.8、流程控制
sass中和其它程序语言一样也拥有流程控制语句,如if,for,each,while,指令,函数等。
SCSS样式:
$blur: lightblue;@for $i from 1 through 10 { .font-#{$i} { /*计算字体大小*/ font-size: 12px+$i*2px; /*颜色变暗*/ color: darken($blur,$i*2); /*如果i是3的倍数,则下划线*/ @if $i%3==0 { text-decoration: underline; } }}
CSS样式:
/*8*/.font-1 { font-size: 14px; color: #a5d4e4; }.font-2 { font-size: 16px; color: #9dd1e1; }.font-3 { font-size: 18px; color: #96cddf; text-decoration: underline; }.font-4 { font-size: 20px; color: #8ec9dc; }.font-5 { font-size: 22px; color: #86c5da; }.font-6 { font-size: 24px; color: #7ec2d8; text-decoration: underline; }.font-7 { font-size: 26px; color: #76bed5; }.font-8 { font-size: 28px; color: #6ebad3; }.font-9 { font-size: 30px; color: #67b7d1; text-decoration: underline; }.font-10 { font-size: 32px; color: #5fb3ce; }
三、CoffeeScript
javascript变得日益重要,但有很多明显的缺点,借助一种中间语言转译出优雅的javascript是解决这些问题的方法。如CoffeeScript,TypeScript。
Coffee Script是JavaScript的转译语言。
Coffee的特点:
CoffeeScript语法类似 Ruby ,可以被编译成 JavaScript
CoffeeScript取JavaScript之精华,而抛弃了诸如全局变量声明、with等容易出错的部分
CoffeeScript是JavaScript与程序员之间的桥梁,程序员看到的是优雅的CoffeeScript接口,使得编程更简洁,写法更随意
更少,更紧凑,和更清晰的代码
通过规避和改变对JavaScript中不良部分的使用,只留下精华,让代码减少出错率,更容易维护
在很多常用模式的实现上采用了JavaScript中的最佳实践
CoffeeScript生成的JavaScript代码都可以完全通过JSLint的检测
中文网: http://coffee-script.org/
官网: http://coffeescript.org/
源码:https://github.com/coffee-js/coffee-script
HTML5——前端预处理技术(Less、Sass、CoffeeScript)