码迷,mamicode.com
首页 > Web开发 > 详细

CSS预处理器—Sass、LESS和Stylus

时间:2018-09-22 12:27:31      阅读:175      评论:0      收藏:0      [点我收藏+]

标签:不同   页面   str   服务   变量   功能   rap   运算符   get   

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玩法变得更高级了,但同时降低了自己对最终代码的控制力。更致命的是提高了门槛,首先是上手门槛,其次是维护门槛,再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。

CSS预处理器—Sass、LESS和Stylus

标签:不同   页面   str   服务   变量   功能   rap   运算符   get   

原文地址:https://www.cnblogs.com/bluestorm/p/9689463.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!