1、背景介绍

1.Sass背景介绍

Sass是对CSS（层叠样式表）的语法的一种扩充，诞生于2007年，最早也是最成熟的一款CSS预处理器语言，它可以使用变量、常量、嵌套、混 入、函数等功能，可以更有效有弹性的写出CSS。

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

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

2.LESS的背景介绍

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

Alexis开发了LESS并提供了类似CSS的书写功能。
注：LESS的官网：<http://lesscss.org/>

3.Stylus背景介绍

Stylus，2010年产生，来自于Node.JS <http://caibaojian.com/t/javascript>社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如Sass和LESS。
Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。
注：Stylus官网：<http://learnboost.github.com/stylus>

2、安装

1.Sass的安装
Sass是Ruby语言写的，但是两者的语法没有关系。必须先安装Ruby，然后再安装Sass。

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

Ruby安装完成后，在开始菜单中找到新安装的Ruby，并启动Ruby的Command控制面板，如下图所示： 在启动的Ruby命令控制面板中输入下面的命令：

gem install sass

输入上面命令，回车后就会自动安装Sass： 这样Sass就安装成功了，也就可以使用了。

2.LESS的安装
LESS的安装和Sass安装有所不同，他不需要依赖于Ruby环境，就能直接安装使用。不过LESS安装分为两种：客户端和服务器端安装。
a)客户端安装：
      我们可以直接在客户端使用“.less”（LESS源文件），只需要在官网 <http://lesscss.org/>载一个javascript <http://caibaojian.com/t/javascript>脚本文件主“less.js <http://caibaojian.com/t/javascript>”，然后在我们需要引入LESS源文件的html <http://caibaojian.com/t/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环境，为了让大家能更清晰的知道如何在服务器端安装LESS，此处简单的过一下安装过程（本文演示的是在 Window7下的安装方法）。
首先到Node Js的官网下载 <http://nodejs.org/download>一个适合Windows系统的安装文件，此处下载的是“node-v0.8.20-x86.msi”：

在启动的Node Js的Command控制面板直接输入下面的命令：
$ npm install less

如果您想下载最新稳定版本的LESS，还可以尝试在Node JS的Command控制面板输入：
$ npm install less@latest
3.Stylus的安装
　　Stylus的安装和LESS在服务器端的安装很相似，同样依赖于Node JS的环境，也就是说也要先安装Node Js（如果安装Node JS请参考前面的介绍）。唯一不同的是在Node JS的Command控制面板输入的命令不一样：
$ npm install stylus
然后，就会自动下载安装最新的stylus库：

Sass、Less和Stylus的更多相关文章

  1. less，sass，stylus配置和应用教程及三者比较

    less,sass,stylus配置和应用教程及三者比较  Less 1. 定义: Less是CSS预处理语言,在css基础之上增加了诸如变量,混合(mix),继承,运算,函数等功能,LESS既可以运 ...

  2. css预处理器 sass和stylus对比以及常用功能

    在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言. 本文涉及到的sa ...

  3. 对比学习sass和stylus的常用功能

    在众多的css预处理器语言中,sass和stylus算是十分优秀的两个.本文主要针对两者的常用功能做个简单的对比分析.在对比中了解二者的差异,同时帮助大家更好的掌握这两种预处理语言.本文涉及到的sas ...

  4. emmet,jade,haml, slim,less,sass,coffeescript等的实战优缺点

    摘要: 文章背景,来自于群内周五晚上的一次头脑风暴式的思维碰撞交流活动. 随着前端技术的蓬勃发展, 各种新技术随着生产力的需要不断的涌入我们的视野, 那今天探讨的话题是这些新时代的前端兵器谱: 一. ...

  5. 分享15款很实用的 Sass 和 Compass 工具

    Sass 是 CSS 的扩展,增加了嵌套规则,变量,混入功能等很多更多.它简化了组织和维护 CSS 代码的成本.Compass 是一个开源的 CSS 框架,使得使用 CSS3 和流行的设计模式比以往任 ...

  6. 学习笔记总结---关于sass

    今天跟大家共同分享交流一下关于sass的知识点: sass的产生: css不是一种编程语言,我们可以用它开发网页样式,但不能用它进行编程.它没有常量,变量,也没有条件语句,只是对属性一行行的描述,资料 ...

  7. 20个编写现代 CSS 代码的建议

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  8. web前端学习部落22群 明白何谓Margin Collapse

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  9. 20个编写现代CSS代码的建议

    明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较 ...

  10. BOOTSTRAP定制

    1.补充:栅格系统中调整列的位置/顺序 (1)方法1:偏移量(col-*-offset-*) (2)方法2:对列进行push/pull操作 col-lg-pull-1        ~         ...

随机推荐

  1. juniper常用命令(二)

    Juniper防火墙基本命令 常用查看命令 Get int查看接口配置信息 Get int ethx/x查看指定接口配置信息 Get mip查看映射ip关系 Get route查看路由表 Get po ...

  2. 深入Spring:自定义注解加载和使用

    前言 在工作中经常使用Spring的相关框架,免不了去看一下Spring的实现方法,了解一下Spring内部的处理逻辑.特别是开发Web应用时,我们会频繁的定义@Controller,@Service ...

  3. 最长k可重区间集

      P3358 最长k可重区间集问题 P3357 最长k可重线段集问题 P3356 火星探险问题 P4012 深海机器人问题 P3355 骑士共存问题 P2754 [CTSC1999]家园 题目描述 ...

  4. 【P1379】八数码难题(搜索+暴力)

    这个题真是... 不想说什么了,及其复杂和烦人的一道题.基础思路就是bfs,用两个队列分别进行0的位置的计算和每一步的状态..然而这个题最重要的一点在于判重,实际上可以康托展开用全排列的个数进行判重, ...

  5. Qt qobject_cast用法 向下转型

    函数原型: T qobject_cast ( QObject * object ) 本方法返回object向下的转型T,如果转型不成功则返回0,如果传入的object本身就是0则返回0. 在使用时有两 ...

  6. sql中的group by 和 having 用法

    sql中的group by 用法:-- Group By语句从英文的字面意义上理解就是“根据(by)一定的规则进行分组(Group)”.--它的作用是通过一定的规则将一个数据集划分成若干个小的区域,然 ...

  7. DNS安装配置

    安装Bind软件: rpm -qa | grep bind bind-utils--.x86_64 bind--.x86_64 bind-libs--.x86_64 配置named.conf , vi ...

  8. 【转载】ORA-12519: TNS:no appropriate service handler found 解决

    感谢原作者! 原文地址:http://www.cnblogs.com/ungshow/archive/2008/10/16/1312846.html ORA-12519: TNS:no appropr ...

  9. Generator函数介绍

    Generator函数 基本概念 英文意思为 "生成器". generator函数是es6提供的一种异步编程解决方案,语法行为与传统函数完全不同.从状态上,首先我们把他理解成一种状 ...

  10. Elasticsearch使用积累

    常用插件 Head查看分片情况,操作简单api Bigdesk监控所在机器的CPU,IO,JVM等指标,简单分片概览 KOPF查看集群gc回收磁盘性能, 分片情况, 简单操作api, 感觉该插件较He ...