zoukankan      html  css  js  c++  java
  • sass、less、stylus的安装及使用

    一、什么是CSS预处器

       CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就 只要使用这种语言进行编码工作。通俗的说,CSS预处理器用一种专门的编程语言,进行web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。 CSS预处理器为CSS增加一些编程的特性,无需考虑浏览器的兼容性问题,例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基 本特性,可以让你的CSS更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。

    CSS预处理器技术已经非常的成熟,而且也涌现出了很多种不同的CSS预处理器语言,比如说:Sass(SCSS)、LESS、Stylus

    到目前为止,在众多优秀的CSS预处理器语言中就属Sass、LESS和Stylus最优秀,讨论的也多,对比的也多。本文将分别从他们产生的背 景、安装、使用语法、异同等几个对比之处向你介绍这三款CSS预处理器语言。相信前端开发工程师会做出自己的选择——我要选择哪款CSS预处理器。

    二、Sass、LESS和Stylus背景介绍

    1.Sass背景介绍

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

    2.LESS的背景介绍

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

    3.Stylus背景介绍

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

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

    三、Sass、LESS和Stylus的安装

    1.Sass的安装

    到RubyInstaller官网上下载Ruby安装文件(随意选择一个版本),此处选择的是最新版本Ruby1.9.3-p385

    Ruby安装文件下载好后,可以按应用软件安装步骤进行安装Ruby。在安装过程中,个人建议将其安装在C盘下,在安装过程中选择第二个选项

    Ruby安装完成后,在开始菜单中找到新安装的Ruby,并启动Ruby的Command控制面板

    在启动的Ruby命令控制面板中输入下面的命令:

    gem install sass

    输入上面命令,回车后就会自动安装Sass

    这样Sass就安装成功了,也就可以使用了。

    2.LESS的安装

    LESS的安装和Sass安装有所不同,他不需要依赖于Ruby环境,就能直接安装使用。不过LESS安装分为两种:客户端和服务器端安装。

    a)客户端安装:

    我们可以直接在客户端使用“.less”(LESS源文件),只需要在官网载一个javascript脚本文件主“less.js”,然后在我们需要引入LESS源文件的html的<head>中加入如下代码:

    <link rel="stylesheet/less" type="text/css" href="文件路径/styles.less">

    <script src="文件路径/less.js" type="text/javascript"></script>

    需要注意的是:在引入“.less”文件中,“link”的“rel”属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是:LESS源文件一定要在“less.js”引入之前引入,这样才能保证LESS源文件正确编译解析。

    b)服务器端安装

    LESS在服务器端的使用主要是借助于LESS的编译器,将LESS源文件编译生成最终的CSS文件,目前常用的方式是利用node的包管理器 (npm)安装LESS,安装成功后就可以在Node环境中对LESS文件进行编译。如此一来,LESS在服务器的安装和Sass的安装有点相似,不同之 处是他们需依赖的环境不一样,LESS需要的是Node JS环境,而Sass需要的是Ruby环境

    3.Stylus的安装

    Stylus的安装和LESS在服务器端的安装很相似,同样依赖于Node JS的环境,也就是说也要先安装Node Js(如果安装Node JS请参考前面的介绍)。唯一不同的是在Node JS的Command控制面板输入的命令不一样:

    $ npm install stylus

    然后,就会自动下载安装最新的stylus库

    四、Sass、LESS和Stylus转译成CSS

    1.Sass源文件转译成CSS文件

    Sass文件就是普通的文本文件,不过其文件后缀名有两种,一种为“.sass”;另一种为“.scss”。我们一般用“.scss”就好,至于这 两种文件扩展名的区别在于“.sass”是Sass语言文件的扩展后缀名,而“.scss”是SCSS语言文件的扩展后缀名,至于Sass和SCSS的详 细区别这里不做介绍。你可以简单的理解为他们都是CSS预处理器语言,而且两者功能特性都一样,只是书写规则不同而以。

    要转译Sass文件的前提是有文件可转,因此先在项目中创建一个Sass文件,此例中将其命名为“style.scss”,并且将其放在对应的项目样式中,如D盘的“www/workspace/Sass/css”目录下。

    启动Ruby的Command控制面板,找到需要转译的Sass文件,如此例此文件放置在D盘的“www/workspace/Sass/css”

    如果仅针对于单文件的转译,需要将“style.scss”转译成“style.css”,只需要在对应的目录下输入下面的命令:

    $ sass style.scss style.css

    单文件的监听,只需要在刚才的命令控制面板中输入:

    $ sass --watch style.scss:style.css

    按下回车键(Enter),这样一来,你只要修改了“style.scss”文件,“style.css”文件就会随着更新变化。

    除了使用Ruby的Command控制面板转译Sass之外还可以考虑第三方工具,比如说有名的Compass.app和fire.app。

    2.LESS文件的转译成CSS文件

    LESS文件的转译和Sass文件转译可以说是大同小异,不同之处是LESS在安装的Node JS环境下通过其自己的命令来进行转译。

    $ lessc style.less

    上面的命令会将编译的CSS传递给stdout,你可以将它保存到一个文件中:

    $ lessc style.less > style.css

    除了上面的命令转译LESS源文件之外,现在还有很多第三方开发的工具,比较常见的有:SimpleLess、Less.app、LESS编译辅助 脚本-LESS2CSS、WinLess和CodeKit.app等,我个人现在常用的是WinLess工具,简单易用,不过在IOS系统下 LESS.app和CodeKit.app很好用。

    3.Stylus源文件转译成CSS文件

    Stylus具有可执行性,因此Stylus能将自身转换成CSS。Stylus可以读取自“stdin”输出到“stdout”,因此Stylus可以像下面转译源文件:

    $ stylus –compress  <some.styl> some.css

    Stylus也像Sass一样,同时接受单个文件和整个目录的转译。例如,一个目录名为“css”将在同一个目录编译并输出“.css”文件。

    $ stylus css

    下面的命令将输出到“./public/stylesheets”:

    $ stylus css –out public/stylesheets

    还可以同时转译多个文件:

    $ stylus one.styl two.styl

    如果你的浏览器安装了Firebug,那么可以使用FireStylus扩展

    $ stylus –firebug  <path>

    五、Sass、LESS和Stylus的语法

    每一种语言都有自己一定的语法规则,CSS预处理器语言也不例外,在真正使用CSS预处器语言之前还有一个不可缺少的知识点,就是对语法的理解。值得庆幸的是,这三款CSS预处理器语言的语法和CSS语法都差不多。

    1.Sass语法

    Sass3.0版本开始使用的是标准的CSS语法,和SCSS可以说是一样的。这样Sass代码转换成CSS代码变得更容易。默认Sass使用“.scss”扩展名。Sass语法规则可以像CSS那样书写:

    /*style.sass新版语法规则*/

    h1{

      color:#936;

      background-color:#333;

    }

    正如你所看到的,在Sass样式中,这样的代码是在简单不过的了。

    重要的一点是,Sass也同时支持老的语法,老的语法和常规的CSS语法略有不同,他需要严格的语法,任何的缩进和字符的错误都会造成样式的编译错 误。Sass可以省略大括号({})和分号(;),完全依靠严格的缩进和格式化代码,而且文件使用“.sass”扩展名,他的语法类似于:

    /*style.sass*/

    h1

      color:#936

      background-color: #333

    2.LESS语法

    LESS是CSS的一种扩展形式,它并没有阉割CSS的功能,而是在现有的CSS语法上,添加了很多额外的功能。就语法规则而言,LESS和Sass一样,都是使用CSS的标准语法,只是LESS的源文件的扩展名是“.less”,其基本语法类似于:

    /*style.less*/

    h1 {

      color: #963;

      background-color: #333;

    }

    3.Stylus语法

    Stylus的语法花样多一些,它的文件扩展名是“.styl”,Stylus也接受标准的CSS语法,但是他也像Sass老的语法规则,使用缩进控制,同时Stylus也接受不带大括号({})和分号的语法,如下所示:

    /*style.styl*/

    /*类似于CSS标准语法*/

    h1 {

      color: #963;

      background-color:#333;

    }

    /*省略大括号({})*/

    h1

      color: #963;

      background-color: #333;

    /*省略大括号({})和分号(;)*/

    h1

      color:#963

      background-color:#333

    在Stylus样式中,你也可以在同一个样式文件中使用不同的语法规则,下面这样的写法也不会报错:

    /*style.styl*/

    h1 {

      color  #963

    }

    h2

      font-size:1.2em

     

  • 相关阅读:
    Hadoop集群(三) Hbase搭建
    Hadoop集群(二) HDFS搭建
    Hadoop集群(一) Zookeeper搭建
    Redis Cluster 添加/删除 完整折腾步骤
    Redis Cluster在线迁移
    Hadoop分布式HA的安装部署
    Describe the difference between repeater, bridge and router.
    what is the “handover” and "soft handover" in mobile communication system?
    The main roles of LTE eNodeB.
    The architecture of LTE network.
  • 原文地址:https://www.cnblogs.com/shenjp/p/6407003.html
Copyright © 2011-2022 走看看