zoukankan      html  css  js  c++  java
  • CSS预处器的了解

    到目前为止,在众多优秀的CSS预处理器语言中就属SassLESSStylus最优秀,讨论的也多,对比的也多。   

    1.Sass背景介绍

    Sass是对CSS(层叠样式表)的语法的一种扩充,诞生于2007年,最早也是最成熟的一款CSS预处理器语言,它可以使用变量、常量、嵌套、混入、函数等功能,可以更有效有弹性的写出CSSSass最后还是会编译出合法的CSS让浏览器使用,也就是说它本身的语法并不太容易让浏览器识别,因为它不是标准的CSS格式,在它的语法内部可以使用动态变量等,所以它更像一种极简单的动态语言。

    其实现在的Sass已经有了两套语法规则:一个依旧是用缩进作为分隔符来区分代码块的;另一套规则和CSS一样采用了大括号({})作为分隔符。后一种语法规则又名SCSS,在Sass3之后的版本都支持这种语法规则。

    注:Sass官网地址:http://sass-lang.com

    2.LESS的背景介绍

    2009年开源的一个项目,受Sass的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手。LESS提供了多种方式能平滑的将写好的代码转化成标准的CSS代码,在很多流行的框架和工具中已经能经常看到LESS的身影了(例如TwitterBootstrap框架就使用了LESS)。

    根据维基百科上的介绍,其实LESSAlexis SellierSass的影响创建的一个开源项目。当时SASS采用了缩进作为分隔符来区分代码块,而不是CSS中广为使用的大括号({})。为了让CSS现有的用户使用起来更佳方便,Alexis开发了LESS并提供了类似CSS的书写功能。

    注:LESS的官网:http://lesscss.org

    3.Stylus背景介绍

    Stylus2010年产生,来自于Node.js社区,主要用来给Node项目进行CSS预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如SassLESS

    Stylus被称为是一种革命性的新语言,提供一个高效、动态、和使用表达方式来生成CSS,以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。

    注:Stylus官网:http://learnboost.github.com/stylus

    SassLESSStylus转译成CSS

    SassLESSStylus源文件(除了LESS源文件在客户端下运行之外)都不能直接被浏览器直接识别,这样一来,要正常的使用这些源文件,就需要将其源文件转译成浏览器可以识别的CSS样式文件,这也是使用CSS预处理器很关键的一步,如果这一步不知道如何操作,那么意味着写出来的代码不可用。   

    SassLESSStylus特性

    这三款CSS预处理器语言具有一些相同的特性,例如:变量、混入、嵌套、函数等。在这一节中,我们依次来对比一下这三款CSS预处理器语言各种特性的异同之处,以及使用方法。

    综上所述,我们对SassLESSStylus做一个简单的对比总结:

    三者都是开源项目;

     Sass诞生是最早也是最成熟的CSS预处理器,有Ruby社区和Compass支持;Stylus早期服务器Node JS项目,在该社区得到一定支持者;LESS出现于2009年,支持者远超于RubyNode JS社区;

    SassLESS语法较为严谨、严密,而Stylus语法相对散漫,其中LESS学习起来更快一些,因为他更像CSS的标准;

    SassLESS相互影响较大,其中SassLESS影响,已经进化到了全面兼容CSSSCSS

    SassLESS都有第三方工具提供转译,特别是SassCompass是绝配;

    SassLESSStylus都具有变量、作用域、混合、嵌套、继承、运算符、颜色函数、导入和注释等基本特性,而且以“变量”、“混合”、“嵌套”、“继承”和“颜色函数”称为五大基本特性,各自特性实现功能基本相似,只是使用规则上有所不同;

    SassStylus具有类似于语言处理的能力,比如说条件语句、循环语句等,而LESS需要通过When等关键词模拟这些功能,在这一方面略逊一层;

    上面是CSS预处理器语言中的SassLESSStylus在某些方面的对比,相对于CSS来说,上面都是CSS预处理器语言的优点?那么他有没有缺点呢?

    万物都有阴阳两极,有圆就有缺,CSS预处理器语言也逃避不了这个宿命。个人感觉CSS预处理器语言那是程序员的玩具,想通过编程的方式跨界解决CSS的问题。可以CSS应该面临的问题一个也少不了,只是增加了一个编译过程而已,简单来说CSS预处理器语言较CSS玩法变得更高级了,但同时降低了自己对最终代码的控制力。更致命的是提高了门槛,首先是上手门槛,其次是维护门槛,再来是团队整体水平和规范的门槛。这也造成了初学学习成本的昂贵。

  • 相关阅读:
    lamp
    ssh 交互脚本
    mysql 备份检测主从脚本
    RANDOM 猜数字脚本
    ansible+playbook 搭建lnmp环境
    集群搭建
    grafana
    nginx lnmp搭建
    shell 基础(1): 变量
    seq 增量输出命令
  • 原文地址:https://www.cnblogs.com/famensaodiseng/p/10301014.html
Copyright © 2011-2022 走看看