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

1、变量

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

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

 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、继承,两这的继承方式以及结果都是一样的,都是通过@extend .xxxx的方式进行继承:

生成的代码如下 :

  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里面,定义函数的话一般都用@mixins 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:;
}
}
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 的人来说也是一种不错的选择。

浅谈stylus与sass的对比的更多相关文章

  1. 浅谈WebService返回数据效率对比

    原文链接 http://www.dotnetgeek.cn/xuexiwebservice1.html 一.什么是WebService: 简单通俗来说,就是企业之间.网站之间通过Internet来访问 ...

  2. 浅谈My SQL引擎的对比

    MySQL数 据库引擎取决于MySQL在安装的时候是如何被编译的.要添加一个新的引擎,就必须重新编译MYSQL.在缺省情况下,MYSQL支持三个引擎:ISAM.MYISAM和HEAP.另外两种类型IN ...

  3. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理

    [微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...

  4. 浅谈Hybrid技术的设计与实现第二弹

    前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...

  5. 浅谈Vue.js

    作为一名Vue.js的忠实用户,我想有必要写点文章来歌颂这一门美好的语言了,我给它的总体评价是“简单却不失优雅,小巧而不乏大匠”,下面将围绕这句话给大家介绍Vue.js,希望能够激发你对Vue.js的 ...

  6. 浅谈Nginx负载均衡和F5的区别

    前言 笔者最近在负责某集团网站时,同时用到了Nginx与F5,如图所示,负载均衡器F5作为处理外界请求的第一道"墙",将请求分发到web服务器后,web服务器上的Nginx再进行处 ...

  7. Android应用安全开发之浅谈加密算法的坑

      <Android应用安全开发之浅谈加密算法的坑> 作者:阿里移动安全@伊樵,@舟海 阿里聚安全,一站式解决应用开发安全问题     Android开发中,难免会遇到需要加解密一些数据内 ...

  8. 浅谈php生成静态页面

    一.引 言 在速度上,静态页面要比动态页面的比方php快很多,这是毫无疑问的,但是由于静态页面的灵活性较差,如果不借助数据库或其他的设备保存相关信息的话,整体的管理上比较繁琐,比方修改编辑.比方阅读权 ...

  9. 浅谈五大Python Web框架

    转载:http://feilong.me/2011/01/talk-about-Python-web-framework 说到Web Framework,Ruby的世界Rails一统江湖,而Pytho ...

随机推荐

  1. 作IFRAME于iOS您的设备上支持滚动

    原文链接: Scroll IFRAMEs on iOS原始日期: 2014年07一个月02日本 翻译日期: 2014年07月10日翻译人员: 铁锚 非常长时间以来, iOS设备上Safari中超出边界 ...

  2. Compile Graphics Magick, Boost, Botan and QT with MinGW64 under Windows 7 64

    Compile Graphics Magick, Boost, Botan and QT with MinGW64 under Windows 7 64 Sun, 01/01/2012 - 15:43 ...

  3. General-Purpose Operating System Protection Profile

    1 Protection Profile Introduction   This document defines the security functionality expected to be ...

  4. 学习 protobuf(一)—— ubuntu 下 protobuf 2.6.1 的安装

    下载地址:https://github.com/google/protobuf/releases/download/v2.6.1/protobuf-2.6.1.tar.gz(如果初次下载失败,不妨多试 ...

  5. 更改linux的最大文件描述符限制

    To ensure good server performance, the total number of client connections, database files, and log f ...

  6. Crystal Report - 利用后台代码设计或实现水晶报表工具栏相关功能

    水晶报表工具栏分页按钮响应事件: 水晶报表中有自带的分页功能,在设置好每页显示的记录后会自动分页,并自动记录总页数和保存当前页,在工具栏可以通过“首页”“尾页”“下一页”“上一页”和“跳页”进行页面跳 ...

  7. 关于linux下如何使用svn 客户端

    1 yum install -y subversion (下载svn) 2 svn chekout "你的svn地址" 然后会询问? 我也不知道是嗄意思 , 大体就是权限什么乱七八 ...

  8. [Scikit-Learn] - introduction

    scikit-learn是一个用于机器学习的 Python 模块,建立在SciPy基础之上. 主要特点: 操作简单.高效的数据挖掘和数据分析 无访问限制,在任何情况下可重新使用 建立在NumPy.Sc ...

  9. Docker container 集装箱说明

    容器操作 使用 docker 命令行操作 docker 容器 启动容器 core@localhost ~ $ docker run Usage: docker run [OPTIONS] IMAGE ...

  10. 签署 Centennial Program Addendum,使用 Desktop Bridge 将 Win32 应用转制成 UWP

    原文 签署 Centennial Program Addendum,使用 Desktop Bridge 将 Win32 应用转制成 UWP 能上架 Windows 应用商店的并不一定必须是 UWP 应 ...