stylus , another css processor
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的更多相关文章
- vue 使用Jade模板写html,stylus写css
vue 使用Jade模板写html,stylus写css 日常工作都是使用vue开发页面和webApp,写的多了就想偷懒简化各种书写方式,所以使用了jade写html,stylus写css,省了很多的 ...
- stylus(css预编译器)
推荐去张鑫旭大神这里详细了解:http://www.zhangxinxu.com/jq/stylus/ 安装 npm install -g stylus 自动编译 $ stylus -w demo.s ...
- vue中使用stylus编写css
安装步骤 cnpm install stylus --save-dev cnpm install stylus-loader --save-dev 写法如下: <style lang=" ...
- CSS预处器的对比——Sass、Less和Stylus
预处器的对比--Sass.LESS和Stylus 转载: 英文原文:http://net.tutsplus.com/tutorials/html-css-techniques/sass-vs-less ...
- 前端学习笔记系列一:6 一种新的css预编译器stylus
stylus是 CSS 的预处理框架.CSS 预处理,顾名思义,预先处理 CSS.那 stylus 咋预先处理呢?stylus 给 CSS 添加了可编程的特性,也就是说,在 stylus 中可以使用变 ...
- CSS+Javascript的那些框架
CSS CSS 制作框架 SASS http://www.oschina.net/p/sass Blueprint http://www.oschina.net/p/blueprintcss Ela ...
- [AngularJS + Webpack] Requiring CSS & Preprocessors
Making your CSS modular is a difficult thing to do, but using Webpack makes this so much easier. By ...
- stylus 详解与引入
Stylus介绍及特点Stylus 是一个基于Node.js的CSS的预处理框架,诞生于2010年,比较年轻,可以说是一种新型语言,其本质上做的事情与 Sass/LESS 等类似, 可以以近似脚本的方 ...
- stylus入门学习笔记
title: stylus入门学习笔记 date: 2018-09-06 17:35:28 tags: [stylus] description: 学习到 vue, 有人推荐使用 stylus 这个 ...
随机推荐
- 设置C++ cout输出精度
cout.precision(5); 数字表示小数点位数 // modify precision #include <iostream> // std::cout, std::ios in ...
- 打印出类所在的jar包
ackage time; /** * Created by sheting on 10/20/2017 */ public class Test { public static void main(S ...
- BIND简易教程(2):BIND视图配置
目录:BIND简易教程(1):安装及基本配置BIND简易教程(2):BIND视图配置(本篇)BIND简易教程(3):DNSSec配置 上文书说到,我们把aaa.apple.tree解析到192.168 ...
- GCD学习(五) dispatch_barrier_async
先看段代码 dispatch_queue_t concurrentQueue = dispatch_queue_create("my.concurrent.queue", DISP ...
- openCV2马拉松第19圈——Harris角点检測(自己实现)
计算机视觉讨论群162501053 转载请注明:http://blog.csdn.net/abcd1992719g/article/details/26824529 收入囊中 使用OpenCV的con ...
- BZOJ2431:[HAOI2009]逆序对数列(DP,差分)
Description 对于一个数列{ai},如果有i<j且ai>aj,那么我们称ai与aj为一对逆序对数.若对于任意一个由1~n自然数组成的 数列,可以很容易求出有多少个逆序对数.那么逆 ...
- Fiddler学习基础(一)
Fiddler官方网站及下载地址:http://www.telerik.com/fiddler 1. Fiddler原理: 作为系统代理,所有的来自微软互联网服务(WinInet)的http请求再到达 ...
- java 编写小工具 尝试 学习(七)
1.在java 编写小工具 尝试 学习(六)里学会了,控件 的随意摆放, 以及大小(x,y,width,height),又根据前面学习的按钮 被点击 的事件监控 的方法 ,点击 按钮 在显示区域显示“ ...
- iOS universallinks唤醒app
从iOS9之后,苹果就推出了这个功能,用来唤醒外部app.这个功能在那些电商app上使用尤其广泛,当你打开对应的h5网页后,上面跳出一个是否跳转app的按钮. 现在iOS11已经基本覆盖,iOS12也 ...
- mybatis——学习笔记
配置文件 <properties resource="dbconfig.properties"></properties> 1. properties 引入 ...