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. hdu-2685 I won't tell you this is about number theory---gcd和快速幂的性质

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2685 题目大意: 求gcd(am-1,an-1)%k 解题思路: 对于am-1 = (a - 1) ...

  2. Django 玩转API

    现在,让我们进入Python的交互式shell,玩转这些Django提供给你的API. 使用如下命令来调用Python shell: $ python manage.py shell 我们使用上述命令 ...

  3. 关于浏览器被http://www.51jetso.com/劫持

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/wwkaven/article/details/36373447     近期,新装了一下系统.安装软 ...

  4. nrf52840蓝牙BLE5.0空中速率测试(nordic对nordic)

    一.基础知识: [1]Data Length:物理层发送一包数据的最大值: [2]MTU: ATT层发送一次数据长度的最大值: [3]GAP Event Length:一个connection eve ...

  5. 命令行参数技巧:__argc,__argv

    几个可以使用的全局变量: _CRTIMP extern int __argc; /* count of cmd line args */ _CRTIMP extern char ** __argv; ...

  6. Mabatis入门案例

    log4j.properties # Global logging configuration #\u5728\u5f00\u53d1\u9636\u6bb5\uff0c\u8bbe\u7f6e\u4 ...

  7. Servlet映射的过程

    1.首先通过上图 locolhost:8080/login.html 访问到这个登录的html页 2 通过html页的 action="LoginServlet" 进行映射,所以填 ...

  8. SPOJ SUBXOR

    SPOJ SUBXOR 题意 给定一个由正整数构成的数组, 求 异或和小于k 的子序列的个数. 题解 假设答案区间为 [L, R], XOR[L, R] 等价于 XOR[1, L - 1] ^ XOR ...

  9. Many-to-many relationships in EF Core 2.0 – Part 1: The basics

    转载这个系列的文章,主要是因为EF Core 2.0在映射数据库的多对多关系时,并不像老的EntityFramework那样有原生的方法进行支持,希望微软在以后EF Core的版本中加入原生支持多对多 ...

  10. c++构造函数详解(转)

    c++构造函数的知识在各种c++教材上已有介绍,不过初学者往往不太注意观察和总结其中各种构造函数的特点和用法,故在此我根据自己的c++编程经验总结了一下c++中各种构造函数的特点,并附上例子,希望对初 ...