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. dailiaojie new

    http://imushan.com/categories/Java/ 编译优化手段.

  2. February 6 2017 Week 6 Monday

    There are no shortcuts to any place worth going. 任何值得去的地方,都没有捷径. Several years ago, I climbed the Hu ...

  3. ZT JAVA WeakReference

    JAVA WeakReference 分类: JAVA 2012-08-28 16:08 305人阅读 评论(0) 收藏 举报 javareferencehashmapcacheclassnull 在 ...

  4. JavaScript函数的声明与调用方式

    入职第一天小记 对于初入前端的程序猿来说,对于函数的理解与使用可谓是相当浅薄的,回顾这自己近几年的工作以及学习经历,准备对JavaScript来个系统的总结. 如果要我们对H5中的表单做个简单的校验, ...

  5. Android(java)学习笔记208:Android下的属性动画高级用法(Property Animation)

    1. 大家好,在上一篇文章当中,我们学习了Android属性动画的基本用法,当然也是最常用的一些用法,这些用法足以覆盖我们平时大多情况下的动画需求了.但是,正如上篇文章当中所说到的,属性动画对补间动画 ...

  6. 【JQ】鼠标经过一组button,弹出各自的气泡图片

    HTML <div id="bubble1" class="bubble"><img src="../image/p_bubble1 ...

  7. Linux学习总结(十六)系统用户及用户组管理

    先来认识两个文件 /etc/passwd/etc/shadow我们打印出首尾三行,来了解下:每行由:分割为7段,每段含义为:第一段:用户名,比如root 用户,普通用户test,lv,test1第二段 ...

  8. Linux学习总结(二) 网络配置-NAT方式静态IP配置篇

    一:DHCP 服务验证 1: 之前我们在里面已经装好了centos,当时我们选择的组网方式为NAT方式,那么我们怎么样如何快速实现虚拟机系统访问外网呢?能不能直接上网呢,来我们试一下ping baid ...

  9. springmvc(3)注解

    有疑问可以参考博主其他关于spring mvc的博文 此时直接进行代码的实现 一般的步骤: -加入jar包 -配置DispatcherServlet -加入Spring MVC配置文件 -编写请求的处 ...

  10. P2213 [USACO14MAR]懒惰的牛The Lazy Cow_Sliver

    P2213 [USACO14MAR]懒惰的牛The Lazy Cow_Sliver 最大化一个子矩阵的和. 我们如何去做,dp和贪心呀! 大体题意:给定一个正方形,然后在正方形中求出一个大小已经给定的 ...