css系列—sass,scss,less,stylus的比较

因为不是很清晰，于是我决定自己写一篇，即当复习。

什么是css?

css即是层叠样式表 (Cascading Style Sheets),用我的话来描述就是样式渲染

它不需要预编译，能直接被浏览器识别并解析。

横空出蓝的css3只是css的升级版本，写法一样，只是新增的些属性。

box-shadow(阴影效果)
border-colors(为边框设置多种颜色) 
boder-image(图片边框)
text-shadow(文本阴影)
text-overflow(文本截断)
border-radius(圆角边框)
opacity(不透明度) 
box-sizing(控制盒模型的组成模式):指定两个boxes接壤
resize(元素缩放):指定一个div元素，允许用户调整大小
outline(外边框)
background-origin(指定背景图片从哪里开始显示)
background-clip(指定背景图片从什么位置开始裁切) 
background(为一个元素指定多个背景)

css或css3的写法示例

h1
  {
	color:orange
	text-align:center
  }

sass

Sass是Ruby语言写的，但是两者的语法没有关系。不懂Ruby，照样可以正常使用Sass。只是必须先安装Ruby，然后再安装Sass。

//使用换行和缩进代表{}
h1
    color:orange
    text-align:center


// 也可以这样 与css写法一样
h1
{
    color:orange
    text-align:center
}

变量写法

$menuActiveBg: #eee //不严谨写法 可以不加分号

难道sass诞生只是为了写法不一样?NO，它的出现是因为有了css没有的运算 变量 作用域..，它比css更强大。

scss

它的功能比sass更多,但写法比css sass严谨。(我用这个scss是最多的)

h1
{
    color:orange;  //如果不加分号，这一块代码将无法识别
    text-align:center;
}

scss变量

$menuActiveBg: #eee;  //严格写法 必须有冒号和分号

less

不需要依赖于Ruby环境，就能直接安装使用。不过LESS安装分为两种：客户端和服务器端安装。

a:客户端 需要less.js脚本

b.服务端 常用的方式是利用node的包管理器（npm）安装LESS

写法基本同sass一样,但是区别是有的。可见

Sass/Scss 和 Less的区别 - 孤舟蓑翁 - 博客园

变量写法

@menuActiveBg: #eee;

等等 .....

stylus

编译器的安装同样最常见的是在node.js上面安装

它是集所有css  scss sass less优点集一身的超级大英雄，我以后要多用它。

Stylus 特性

• 冒号可有可无
• 分号可有可无
• 逗号可有可无
• 括号可有可无
• 变量
• 插值（Interpolation）
• 混合（Mixin）
• 数学计算
• 强制类型转换
• 动态引入
• 条件表达式
• 迭代
• 嵌套选择器
• 父级引用
• Variable function calls
• 词法作用域
• 内置函数（超过 60 个）
• 语法内函数（In-language functions）
• 压缩可选
• 图像内联可选
• Stylus 可执行程序
• 健壮的错误报告
• 单行和多行注释
• CSS 字面量
• 字符转义
• TextMate 捆绑
• 以及更多！

除了写法上的不同外，后缀上的不同外，它们的编译器也是大不同的。

假如我的文章不够清晰，可移步见下面文章，写的也是很好。

CSS 预处理的区别的深度比较 - Stylus/Sass/Less - 简书