CSS预处理器—Sass、LESS和Stylus
http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html
一、什么是CSS预处器
CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题,例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。
二、Sass、LESS和Stylus背景介绍
为了能更好的了解这三款流行的CSS预处理器,我们先从其背景入手,简单的了解一下各自的背景信息。
1.Sass背景介绍
Sass是对CSS(层叠样式表)的语法的一种扩充,诞生于2007年,最早也是最成熟的一款CSS预处理器语言,它可以使用变量、常量、嵌套、混入、函数等功能,可以更有效有弹性的写出CSS。Sass最后还是会编译出合法的CSS让浏览器使用,也就是说它本身的语法并不太容易让浏览器识别,因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。
其实现在的Sass已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则和CSS一样采用了大括号({})作为分隔符。后一种语法规则又名SCSS,在Sass3之后的版本都支持这种语法规则。
注:Sass官网地址:http://sass-lang.com
2.LESS的背景介绍
2009年开源的一个项目,受Sass的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码,在很多流行的框架和工具中已经能经常看到LESS的身影了(例如Twitter的Bootstrap框架就使用了LESS)。
根据维基百科上的介绍,其实LESS是Alexis Sellier受Sass的影响创建的一个开源项目。当时SASS采用了缩进作为分隔符来区分代码块,而不是CSS中广为使用的大括号({})。为了让CSS现有的用户使用起来更佳方便,Alexis开发了LESS并提供了类似CSS的书写功能。
注:LESS的官网:http://lesscss.org
3.Stylus背景介绍
Stylus,2010年产生,来自于Node.js社区,主要用来给Node项目进行CSS预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如Sass和LESS。
Stylus被称为是一种革命性的新语言,提供一个高效、动态、和使用表达方式来生成CSS,以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。
注:Stylus官网:http://learnboost.github.com/stylus
综上所述,我们对Sass、LESS和Stylus做一个简单的对比总结:
- 三者都是开源项目;
- Sass诞生是最早也是最成熟的CSS预处理器,有Ruby社区和Compass支持;Stylus早期服务器Node JS项目,在该社区得到一定支持者;LESS出现于2009年,支持者远超于Ruby和Node JS社区;
- Sass和LESS语法较为严谨、严密,而Stylus语法相对散漫,其中LESS学习起来更快一些,因为他更像CSS的标准;
- Sass和LESS相互影响较大,其中Sass受LESS影响,已经进化到了全面兼容CSS的SCSS;
- Sass和LESS都有第三方工具提供转译,特别是Sass和Compass是绝配;
- Sass、LESS和Stylus都具有变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等基本特性,而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”称为五大基本特性,各自特性实现功能基本相似,只是使用规则上有所不同;
- Sass和Stylus具有类似于语言处理的能力,比如说条件语句、循环语句等,而LESS需要通过When等关键词模拟这些功能,在这一方面略逊一层;
上面是CSS预处理器语言中的Sass、LESS和Stylus在某些方面的对比,相对于CSS来说,上面都是CSS预处理器语言的优点?那么他有没有缺点呢?
万物都有阴阳两极,有圆就有缺,CSS预处理器语言也逃避不了这个宿命。个人感觉CSS预处理器语言那是程序员的玩具,想通过编程的方式跨界解决CSS的问题。可以CSS应该面临的问题一个也少不了,只是增加了一个编译过程而已,简单来说CSS预处理器语言较CSS玩法变得更高级了,但同时降低了自己对最终代码的控制力。更致命的是提高了门槛,首先是上手门槛,其次是维护门槛,再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。
相关文章
- html+css网页开发 之 头部导航条(logo、导航栏、搜索框)
- css怎么改鼠标样式,如何利用CSS改变鼠标的样式
- css样式表
- 在html中加入外部css样式,如何引入CSS样式表?
- 【说站】css设置文字居中的两种方法
- css怎么隐藏滚动条「建议收藏」
- CSS媒体查询_css网页
- 使用html css实现180箭头旋转,纯CSS实现箭头旋转「建议收藏」
- TailwindCSS—一个用于实现快速UI开发的实用工具集CSS框架。
- css易忘知识点换行
- 寒假提升 | Day8 CSS 第六部分
- 【CSS教程】紫色渐变登陆布局html+css代码
- 【CSS】浮动 ⑤ ( 浮动布局案例 - 导航栏模块 | 核心要点说明 | 网页默认样式 | 盒子模型居中显示 | 设置渐变背景 | 设置列表浮动 | 设置文本水平垂直居中 | 设置链接文本样式 )
- 【CSS】PhotoShop 切图 ① ( 常见的图片格式 - jpeg、gif、png、psd | PhotoShop 切片工具 )
- 属性Oracle的CSS属性:让你的网站更出彩(oracle的css)
- HTML CSS
- 用CSS打造多彩文字链接
- CSS顶级技巧大放送,div+css布局必知
- CSS教程之css选择器、属性、值
- IE6不能正常解析CSS文件问题的解决方法及原因分析
- 简单的加密css地址防止别人下载你的CSS文件的方法
- 利用jquery动画特效和css打造的侧边弹出垂直导航
- PHP采集静态页面并把页面css,img,js保存的方法
- Windows下使用apache模块实现合并多个js、css提高网页加载速度