1. install from npm

sudo npm install stylus

2. create a styl file named step1.styl

border-radius() {
-webkit-border-radius: arguments
-moz-border-radius: arguments
border-radius: arguments
} body a {
font: 12px/1.4 "Lucida Grande", Arial, sans-serif;
background: black;
color: #ccc;
} form input {
padding: 5px;
border: 1px solid;
border-radius: 5px;
}

3. create a js file for render css from styl file

var stylus = require('stylus');

var str=".{border:1px solid red;}";
str = require("fs").readFileSync("step1.styl", "utf8"); stylus.render(str, { filename: 'step1.styl' }, function(err, css){
if (err) throw err;
console.log(css);
});

https://github.com/Automattic/stylus

stylus , another css processor的更多相关文章

  1. vue 使用Jade模板写html,stylus写css

    vue 使用Jade模板写html,stylus写css 日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式,所以使用了jade写html,stylus写css,省了很多的 ...

  2. stylus(css预编译器)

    推荐去张鑫旭大神这里详细了解:http://www.zhangxinxu.com/jq/stylus/ 安装 npm install -g stylus 自动编译 $ stylus -w demo.s ...

  3. vue中使用stylus编写css

    安装步骤 cnpm install stylus --save-dev cnpm install stylus-loader --save-dev 写法如下: <style lang=" ...

  4. CSS预处器的对比——Sass、Less和Stylus

    预处器的对比--Sass.LESS和Stylus 转载: 英文原文:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less ...

  5. 前端学习笔记系列一:6 一种新的css预编译器stylus

    stylus是 CSS 的预处理框架.CSS 预处理,顾名思义,预先处理 CSS.那 stylus 咋预先处理呢?stylus 给 CSS 添加了可编程的特性,也就是说,在 stylus 中可以使用变 ...

  6. CSS+Javascript的那些框架

    CSS CSS 制作框架 SASS http://www.oschina.net/p/sass Blueprint  http://www.oschina.net/p/blueprintcss Ela ...

  7. [AngularJS + Webpack] Requiring CSS & Preprocessors

    Making your CSS modular is a difficult thing to do, but using Webpack makes this so much easier. By ...

  8. stylus 详解与引入

    Stylus介绍及特点Stylus 是一个基于Node.js的CSS的预处理框架,诞生于2010年,比较年轻,可以说是一种新型语言,其本质上做的事情与 Sass/LESS 等类似, 可以以近似脚本的方 ...

  9. stylus入门学习笔记

    title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...

随机推荐

  1. 不错的.net开源项目

    Json.NET http://json.codeplex.com/ Json.Net是一个读写Json效率比较高的.Net框架.Json.Net 使得在.Net环境下使用Json更加简单.通过Lin ...

  2. mongodb启动和关闭

    mongodb的启动 mongod --dbpath=/data/mongodb/data --logpath=/data/mongodb/log/33988.log --port 33988 --f ...

  3. 关于token,session,cookie的概念和区别

    记录几篇讲的比较好的文章 https://www.cnblogs.com/moyand/p/9047978.html https://blog.csdn.net/wabiaozia/article/d ...

  4. 通过渲染器Shader实现图像变换效果

    在上一篇文章中,一起学习了通过设定画笔风格来实现图形变换,没读过的朋友可以点击下面链接: http://www.cnblogs.com/fuly550871915/p/4886455.html 是不是 ...

  5. Hadoop-2.2.0中文文档—— Common - 超级用户模拟别的用户

    简单介绍 此文档描写叙述了一个超级用户怎样在安全的方式下以还有一用户的名义提交作业或訪问hdfs. Use Case 下一部分描写叙述的的代码演示样例对此用户用例是可用的. 一个username为's ...

  6. boost tss.hpp源码分析

    tss.hpp定义了thread_specific_ptr,使用thread local storage 技术 1.在thread目录下的win32和pthread目录下thread_data.hpp ...

  7. Linux总结(十二)set_uid set_gid stic_bit 软链接 硬链接

    一 set_uid 之前我们修改普通用户的登陆密码,都是以管理员身份在操作,比如我们在lv账户下,我们使用sudo passwd lv 重置lv账户密码,此时我们直接拿到root权限忽略掉了文件权限的 ...

  8. [转]JOGL安装

    本章介绍了设置环境以使用JOGL使用不同的集成开发环境(IDE),在您的系统上. 安装JOGL 对于JOGL安装,需要有以下系统要求: 系统要求 第一个要求是要在机器上安装Java Developme ...

  9. AutoLayout对 scrollview的contentSize 和contentOffset属性的影响

      AutoLayout对 scrollview的contentSize 和contentOffset属性的影响 问题一.iOS开发中,如果在XIB文件中创建一个scrollview,同时给它设置布局 ...

  10. if else 和 switch的效率

    switch在判断分支时,没有判断所有的可能性,而是用一个静态表来解决这个问题,所以速度要比if-else快. 但是,switch对较复杂的表达式进行判断,所以当我们需要判断一些简单数值时,用swit ...