stylus 安装-编译

简介

css预处理器有Less、Sass(Scss)及Stylus;它们各自的背景如下:

Sass:2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框架,目前受LESS影响,已经进化到了全面兼容CSS的SCSS(SCSS 需要使用分号和花括号而不是换行和缩进)。

Less:2009年出现,受SASS的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手,在ruby社区之外支持者远超过SASS,其缺点是比起SASS来,可编程功能不够,不过优点是简单和兼容CSS,反过来也影响了SASS演变到了SCSS的时代,著名的Twitter Bootstrap就是采用LESS做底层语言的。

Stylus:2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如SASS和LESS。

stylus 安装

//git 全局安装
$ npm install -g stylus

运行stylus -h可以获得相关的命令行支持

stylus -h 帮助界面

自动编译

需要记住两个命令

  1. -w 是自动监视文件
  2. -o 是将编译后的CSS文件输出到指定文件中

例如我想要自动编译css/style.styl文件,只需要在命令行输入
$ stylus -w css/style.styl -o css/
此时修改css/style.styl文件就会得到编译后的 css/style.css文件
书写代码时只需要在css/style.styl文件中书写即可

最后

全面的 stylus 知识可以参考官方文档,或者张鑫旭翻译的中文文档

参考:https://www.jianshu.com/p/5fb15984f22d

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1、LESS的官网:http://lesscss.org 2、Sass官网地址:http://sass-lang....
    Howie223阅读 3,761评论 0 5
  • 再谈CSS 预处理器2016-09-09 Justineo JavaScript转自:http://efe.bai...
    抓住时间的尾巴吧阅读 1,599评论 0 2
  • 大家好,我是IT修真院郑州分院第05期学员,一枚正直纯洁善良的web程序员。今天给大家分享一下,修真院官网css任...
    渣渣啊123阅读 2,445评论 0 4
  • 在现在的前端开发中,前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等等一些原本后端的思想开始...
    Charlot阅读 5,497评论 1 32
  • 什么是CSS预处理器 CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一...
    青青玉立阅读 1,084评论 0 0