by zhangxinxu from https://www.zhangxinxu.com
本文地址：https://www.zhangxinxu.com/wordpress/?p=2464
Stylus中文文档
一、为什么我会讲Stylus，而不是SASS和LESS？
SASS显然优于LESS（所以LESS你就休息去吧），SASS刚出来的时候我就在文章有有所提到，现在貌似已经被很多同行熟知，甚至有些小众项目组已经使用之。
然而，我却没有专门花功夫介绍SASS, 为何？那为何现在又花大把功夫整理和介绍Stylus？异同在何处？
（以下有表述不准确之处欢迎指正）
需要的语言
SASS这个东西是很好的，想法也是很不错的，改变了我们书写CSS的习惯，熟练之后，写CSS的效率会大大提升。但我对其只是一笔带过，主要原因是其学习成本，准确说，是安装SASS必须先安装的Ruby这门语言的学习成本。
SASS我没有实践过，也不知道其中是否用到了Ruby语言。但是，显然，接触是无可避免地。考虑到：
- 大多数所谓前端是写页面过来的，程序就是个软肋，Ruby?得了吧，他们JS的数组还没用熟呢！
- 一门与自己职业关系不大的语言，很少听过的语言，算了吧，花功夫学这个就是浪费青春年华啊！
因此，很多人会退却，其中就有我，我不想花功夫去学习甚至熟悉Ruby，因为自己觉得，有这功夫，还不如把JS再扎实扎实。
但是，我看到Stylus后，眼睛就亮了！你需要的不再是Ruby了而是NodeJS.
NodeJS大家应该都熟知，v8引擎下的JavaScript平台还是什么称呼的。总之，创建的是js文件，使用的是JavaScript语言。
换言之，就是，我们使用语借助JavaScript让CSS更富有表现力，更动态，更健壮！
前端两大精锐CSS与JS可以如此搞基！就算你不腐，也肯定会兴奋的啊！一切都在前端自己内部消化，磨合与提升，我觉得这个显然要比SASS更容易让诸多同行们接受。
window支持
我们很多同行的电脑并不是Linux或OS X系统，而是window系统。在nodejs刚出来的时候，window系统只能看着别人的锅灶流口水。但是，现在，window系统也支持nodejs了，而且安装超级方便（这个回头会介绍），附带常用npm库。
因此，这个大背景的支持使我认为Stylus可以被广大同行多熟知，至少，自己手动搞个小demo什么的绝对没问题，这就足够了！
转折
然而，我并没有多少实践经验，同时，对于其代码实现也并没有深究。因此，如果对比实用性以及代码质量等方面，Stylus是否比SASS更优秀，我就无法确定了！
二、说这多，Stylus究竟是何方妖孽啊？
首先，Stylus很年轻，最近才出来。
其次，其本质上做的事情与SASS/LESS等类似（因此有很多借鉴），以近似脚本程序的方式书写CSS代码。例如，关于CSS3圆角代码，可能就会使下面这样：
border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments a.button border-radius 5px
尼玛，分号啊，逗号啊，冒号啊什么的都给阉割了，还莫名多了arguments和类似函数的东西。
第三，默认与NodeJS走得很近，与js联系紧密。
第四，支持Ruby之类框架，有FireBug插件，以及其他………………N多特征
三、急了，先看我翻译的文档吧！
连续几天忙到11点多（晚上），就是翻译Stylus的官方文档。大家不点击一下实在对不住我啊，您可以狠狠地点击这里：stylus参考文档中文版
非常详细地介绍了Stylus的各类用法。我的体会是，这东西很强大，就像个新的语言一样！
文档左边为特征们：
右边为详细：
很简单的界面，使用都懂的。
至于里面的内容嘛~~我自己也有不少不懂的地方，加上时间仓促啊，以及本身拙劣的英语。因此，肯定有不少表述不准确的地方，大家一定要指出来啊，我会及时更正的。
四、Stylus的获取与安装
Stylus安装如下：
如果您的电脑已经安装了nodejs，则不谈~~；如果没有先去nodejs官方下载页面下载安装nodejs，支持window系统，直接双击安装。然后，安装stylus包，如下代码：
$ npm install stylus
然后，就会自动下载安装最新的stylus库。
然后，你就可以按照文档或github上的说明构建更有趣的CSS代码了！！
五、Stylus应用实例
总觉得肚子里有很多话要说，但又倒不出来，正好应了那句歇后语：茶壶倒饺子——出不来。
罢了，给个例子吧，然后就撤了。我自己吹得天花乱坠一点用都没有，还得您自己体会，琢磨啊~~
1. 新建CSS文件
话虽说是CSS文件，你建个txt文档也是可以的。官方打包资源显示的是.styl格式的文件，基本上也就是txt文档改个后缀名。这里，我就省点功夫，直接CSS文件了，如下CSS代码（主要参考github首页上的CSS代码例子，有些许改动）（假设文件为stylus.css）：
border-radius() -webkit-border-radius: arguments -moz-border-radius: arguments border-radius: arguments body a display inline-block padding: 2px 5px font: 12px/1.4 Arial, sans-serif background: black color: #eee border-radius: 2px form input padding: 5px border: 1px solid border-radius: 5px
2. nodejs下的渲染
好了，现在就是nodejs的工作了，我们新建个js文件，假设名叫stylus_test.js, 然后其代码如下：
var css = require("stylus"),
str = require("fs").readFileSync("stylus.css", "utf8");
css.render(str, { filename: "stylus.css" }, function(err, css) {
if (err) throw err;
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/css'});
res.end(css);
}).listen(1337, '127.0.0.1');
console.log('已经启动 http://127.0.0.1:1337/');
});
上面代码很简单也很基本：请求"stylus"包，读文件，然后渲染。其中function(err, css)这里的css就是渲染之后返回的CSS代码内容，也就是要在页面上显示的CSS代码内容。
而里面几行黑色的http相关的代码只是用来启动服务器并创建个CSS文件而已。
3. 测试的HTML页面
HTML页面内容如下：
<link rel="stylesheet" href="http://127.0.0.1:1337" type="text/css" />
<form>
<input type="text" /><a href="#">确定</a>
</form>
4. 启动与运行
打开cmd.exe，类似下图的输入（具体代码与项目目录有关）：
然后，访问我们的静态页面，就会有下图所示的效果了（截自FireFox浏览器）：
此时，使用firebug查看，就可以看到我们生成的CSS代码咯：
本文没有结语，至此大结局。
本文为原创文章，转载请注明来自张鑫旭-鑫空间-鑫生活[https://www.zhangxinxu.com]
本文地址：https://www.zhangxinxu.com/wordpress/?p=2464
（本篇完）
相关文章
- 翻译 - CSS高峰会议内容精选 (0.475)
- 翻译-不同CSS技术及其CSS性能 (0.474)
- 见多识广：CodePen项目网站简介 (0.461)
- 纯CSS实现易拉罐3D滚动效果 (0.320)
- jQuery与MooTools库的一些比对 (0.308)
- quickLayout.css-快速构建结构兼容的web页面 (0.308)
- 是时候好好安利下LuLu UI框架了！ (0.308)
- 巧用:is()或:where()伪类让scoped的style依然全局匹配 (0.308)
- 高富帅seajs使用示例及spm合并压缩工具露脸 (0.205)
- JS一般般的网页重构可以使用Node.js做些什么 (0.205)
- 详解日后定会大规模使用的CSS @layer 规则 (RANDOM - 0.012)