浅谈stylus与sass的对比

all we konw , 这两个都是css的预编译工具,但虽然都是编译工具,但还是存在差别的,下面来讲讲其中的区别

1、变量

 sass定义变量是以这种形式进行定义的$xxx:10;而stylus的定义方式更加接近

    浅谈stylus与sass的对比

 stylus的定义方式跟javascript的表达方式一样(对于写js的人来说可能更为直观)

浅谈stylus与sass的对比

 p.s   在sass里面,如果有全局变量, 局部变量都同名的话, 局部变量会覆盖全局变量

 

-  sass1 --
$white :#fff

body{
    $white : #ccc;
    color : $white
}
.nav{
    color : $white
}
sass 1

-  sass2 --
$white :#fff
//加上了!global 属性之后,上一行这个$white :#fff删掉也不会报错。 !global 在sass3.3及以后的版本才实现
body{
    $white : #ccc !global; //这样子写的话就算没有第一行的#fff 亦不会编译错误,因为!global 指定这个变量为全局变量了,
    color : $white
}
.nav{
    color : $white
}
sass 2

- 输出 --
body{ color : #ccc; } .nav{ color : #ccc; }

 

 stylus的话变量的作用域比较好,同一层级的同一个变量才会覆盖,不同层级(如下面的代码)不存在覆盖的风险

-  stylus --
white = #fff body
{ white = #ccc; color : white } .nav{ color : white } - 输出 -- body{ color : #ccc } .nav{ color : #fff }

 

2、继承,两这的继承方式以及结果都是一样的,[email protected] .xxxx的方式进行继承:

浅谈stylus与sass的对比

生成的代码如下 : 

浅谈stylus与sass的对比

  p.s : 假设在上面未编译的代码中间有N行,其中某一行也对p的margin进行改动的话,编译出来的p的样式会以最后那次对p的改动为准(这个是我觉得不太好的地方,没准那一天真有人加了那么一行,样式就错了),但是在less里面就不是这样子了,生成的结果是,在p ul ,ol的样式里面包含这.block的样式

    另外再说一点 :sass不支持嵌套的继承:

- sass -
form button padding: 6px a.button @extend form button

- sass -
Syntax error: Can't extend form button: can't extend nested selectors // 解析错误: 无法继承自 button: 不能继承嵌套选择器 on line 6 of standard input Use --trace for backtrace.

  

Stylus中,只要选择器匹配,就可以生效:

- stylus -

form input[type=text] padding: 5px border: 1px solid #eee color: #ddd textarea @extends form input[type=text] padding: 10px

- stylus -

  

生成:

form input[type=text],
form textarea {
  padding: 5px;
  border: 1px solid #eee;
  color: #ddd;
}
textarea {
  padding: 10px;
}

  

3、函数

在stylus里面 定义一个函数的话比较简单vender(args...) , vender(type=padding,n = 5px) 简单来说就是随便写个名字然后加一个括号就完事了,但它有一点跟javascript很类似,就是可以在这个函数体里面使用arguments对象,这个是sass,less都无法提供的。

在sass里面,[email protected] xxx($parent,$n) ,@mixins xxx{}参数必须是以$开头才可以,而且函数里面能取到的参数只有函数形参数上的个数,超过的就忽略了

 

4、判断语句 : 

stylus的判断语句跟coffee-script很类似,用到unless

disable-padding-override = true
padding(args...)
  unless disable-padding-override is defined and disable-padding-override //第一种用法
    padding(x, y)
      margin y x
negative(n) //第二种用法
  unless n is a 'unit' //unit是数字的意思
    error('无效数值')
  if n < 0
    yes
  else
    no

body padding 5px 10px

想对而言, sass的语法更为简介易懂一点,个人比较喜欢这点:

$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

 

5、for循环

这两者的循环中取数的方式不一样,sass用的是类似与模板的功能,而stylus里面基本上跟javascript一致

-sass 
@for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } //for循环里头需要通过#{$xxx}的方式取到for上面$i的值,这个写法虽然复杂,但是容易区分。 }
 stylus 
body fonts = Impact Arial sans-serif for font, i in fonts foo i font //for循环里面直接就能取到循环上面的数值,这个稍微会直接点

后续还有很多不同的点,需要的话可以点击下以下两个连接来了解更多:

http://www.w3cplus.com/sassguide/syntax.html

http://www.zhangxinxu.com/jq/stylus/

总结下两者:

sass的编译更接近与css的原生的方式来写,stylus的方式比较接近coffee-script , 实现出来的效果虽然也有细微的差异,看个人情况使用吧;

我自己的话还是喜欢用sass,因为写习惯了js,觉得sass的语法跟平常日常使用的技术都比较相关(比如for循环的#{$i},比如$aaa : xxx) 看起来更容易上手。个人感觉stylus用法上有点累赘,不过对与写过coffee-scirpt 的人来说也是一种不错的选择。

更多相关文章
  • Web服务器和动态语言如何交互CGIFastCGIFPM浅谈
    一个用户的Request是如何经过Web服务器(Apache,Nginx,IIS,Light)与后端的动态语言(如PHP等)进行交互并将结果返回给用户的呢? 本文浅谈个人观点,可能有误,欢迎拍砖,共同学习.   一. 首先明确几个概念,以便后续说明 CGI:(Common Gateway Inter ...
  • 浅谈Cisco4500系列交换机CPU超载 一:CPU超载原因: 导致CISCO4500系列交换CPU超载的原因很多.最常见的原因为网络中异常包过多,使核心交换机CPU疲于控制,转发异常包,CPU超载运作.在我们公司有出现过下列三种方式导致异常包过多现象: 1:病毒(ARP,DHCP协议包过多): ...
  • 从MySQL Bug#67718浅谈B+树索引的分裂优化
  • 一.进程相关概念 1.OS运行 Kernel和 process(进程): 2.内存地址: 线性内存 物理内存 3.CPU: a)x86CPU执行环: 第0环是执行特权命令(最内圈): 第1和2环是没使用的: 第3环是用户的运行程序(最外圈): b)程序运行采用轮流替换的方式,这种方式可以有优先级控制 ...
  • 


    		    浅谈Android系统进程间通信(IPC)机制Binder中的Server和Client获得Service Manager接口之路
    在前面一篇文章浅谈Service Manager成为Android进程间通信(IPC)机制Binder守护进程之路中,介绍了Service Manager是如何成为Binder机制的守护进程的.既然作为守护进程,Service Manager的职责当然就是为Server和Client服务了.那么,S ...
  • 浅谈 js 对象 toJSON 方法
    前些天在<浅谈 JSON.stringify 方法>说了他的正确使用姿势,今天来说下 toJSON 方法吧.其实我觉得这货跟 toString 一个道理,他是给 stringify 方法字符串化的时候调用的.看下 MDN 官方文档吧<toJSON behavior>.非常简单 ...
  • [浅谈ADC产品32位和64位之区别] 本文谈谈应用交付产品(ADC)使用32位和64位系统的差别,回顾以往,网络设备及安全产品的性能一直受到系统最大4GB内存寻址空间的限制,因为传统32位系统对于内存的寻址能力总共就4GB,而4GB空间里还要放其他系统资源:比如系统 BIOS,输入输出设备的地址和 ...
  • 浅谈OCR之Onenote 2010
    原文:浅谈OCR之Onenote 2010上一次我们讨论了Tesseract OCR引擎的用法,作为一款老牌的OCR引擎,目前已经开源,最新版本3.0中更是加入了中文OCR功能,再加上Google的更新.维护,可以说是潜力很大,值得期待.由上一次的测试结果也可以看出,Tesseract的OCR结果还 ...
一周排行