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

时间： 2024-10-14 09:16:01

HTML5——前端预处理技术（Less、Sass、CoffeeScript）的相关文章

CSS3与页面布局学习总结（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题.其中Less[les]与Sass是CSS的预处理技术,而CoffeeScript.TypeScript则是javascript的预处理技术. 一.Less 1.1.概要 Less是一种动态样式语言,L

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

目录 一.Less 1.1.概要 1.2.变量 1.3.解析Less 1.3.1.在线处理 1.3.2.预处理 1.4.混入(Mixins) 1.5.嵌套 1.6.运算 1.7.函数 1.8.继承 1.9.作用域 1.10.注释 二.Sass 2.1.变量 2.2.嵌套 2.3.导入 2.4.mixin 混入 2.5.扩展/继承 2.6.运算 2.7.函数 2.8.流程控制 三.CoffeeScript 3.1.安装 3.2.使用 四.TypeScript 4.1.安装 4.2.使用typesc

CSS3与页面布局学习笔记（七）——前端预处理技术（Less、Sass、CoffeeScript、TypeScript）

CSS不像其它高级语言一样支持算术运算.变量.流程控制与面向对象特性,所以CSS样式较多时会引起一些问题,如修改复杂,冗余,某些别的语言很简单的功能实现不了等.而javascript则是一种半面向对象的动态语言,有java的影子,有C的味道,中间有比其它语言多的糟粕,使用预处理办法可以解决这些问题.其中Less[les]与Sass是CSS的预处理技术,而CoffeeScript.TypeScript则是javascript的预处理技术. 一.Less 1.1.概要 Less是一种动态样式语言,L

什么是HTML5前端开发？HTML5前端要学哪些技术？

什么是HTML5前端开发?前端开发一般指网页开发,前端开发是从网页制作上演变过来的,网页上软件化的交互形式都是基于前段技术实现的.程序员指从事程序开发.维护的专业人员,其中程序员可以分为设计和编码两个部分. HTML5前端的发展前景可观,可以从事的工作也很多,比如:web前端开发工程师.HTML5开发工程师.web APP开发工程师.Java开发工程师等. 那么想要学好HTML5前端开发,那么需要掌握的专业技术有哪些? 第1阶段:前端页面重构:PC端网站布局.HTML5+CSS3基础项目.Web

谈谈CSS预处理技术中for循环的应用-CSS Sprite

各种新技术的出现,推动着Web前端技术飞速发展,在提升用户体验的同时也方便开发者: 在前端优化时,我们使用CSSSprite技术,把多个图片合在一张图片上,然后通过background-image,background-position来定位现实不同效果,这样来达到减少HTTP请求,毕竟HTTP请求是相当昂贵的,但是HTTP请求是少了,开发人员工作量就大了,要定位图片不是一件很方便的事情,非常麻烦,要一个一个地计算: 其实我们可以有点技巧,让图片排列有点规律,这样可以减少大量时间: 假如我们的图

HTML5前端开发工程师工资为什么那么高？

现代社会的就业压力可以说是非常的大,大学毕业生一抓一大把,要是没有一技之长很难在这个社会中立足,所以为了能够跟上时代的脚步,就必须掌握一个特长,就目前的发展来说,企业对于HTML5前端开发人才需求量可以说是非常的大.那么HTML5前端开发工程师工资为什么那么高呢? 越来越多的企业开始注重到用户体验,小到企业网站.个人主页,大到政府部门,都是通过网站向外界展示形象.传播信息,网站离不开HTML5前端开发人员,所以学习HTML5前端开发在当前社会里非常受用,工资也就越来越高. HTML5前端开发工程

爆栈之前端工程化技术小结备案

ps,前些天一90后同事说,要我多写些blog,因为你的实力要show给别人知道,就要怎样怎样的.. 同时建议写个工程化架构来简化工作等等.有时觉得有点对,又觉得有点可笑,有觉得有点无奈... 由于本人是重后端技术,所以对前端技术了解并不深入. 由于很多都是原始pc的web,而且大多都是轻前端项目.所以这里先说下以前用到过的前端js技术大多是: jquery,extjs,easyui,ko,bootstrap,dorado等等,当然还有各种各样的,如日历,上传,富编辑器,报表等等js插件. 但现

【转】Web前端黑客技术揭秘{笔记}

原文 http://www.cnblogs.com/r00tgrok/articles/Web-Hacking.html 前些日子看完了白帽子讲Web安全,当时就PHP安全一 章做了点小笔记,感觉看书还是留下点东西比较好.翻开Web前端黑客技术揭秘一书决定要做笔记,但是这样下来其实进度就比较慢了,敲字做笔记绝对远比看书 来的慢.有时候上午看完的内容做笔记时要花一天时间,一方面是要敲字,另一方面是自己只从书上摘录部分内容有时候需要将其串起来,还有就是碰上自己想发两 句言也会拖慢进度.总之现在书是看

HTML5前端（移动端网站）性能优化指南

HTML5是一种最新发布网页构架的普遍模型,是构建对程序.对用户都更有价值的数据驱动的Web的前端技术框架,它的价值在于融合CSS/javaScript/flash等众多前端开发技术,更多的体现在对交互的理解和视觉设计的还原上. HTML5框架可以提升网站的访问速度,通过优化前端将响应时间加快,使用户的等待时间减少,所谓前端是指在客户端通过浏览器发送了一个请求,除去后台系 统用户请求.执行数据查询并对结果进行组织所需要处理消耗的时间,在涌现的新技术中,JavaScript和一套新的API纯脚本技