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 这个 ...
随机推荐
- Codeforces Round #239 (Div. 1)C, 407C
题目链接:http://codeforces.com/contest/407/problem/C 题目大意:给一个长度为n的数列,m次操作,每次操作由(li, ri, ki)描述,表示在数列li到ri ...
- Linux 命令行浏览器
真是没有做不到只有想不到! Linux下竟然有命令行式的浏览器:W3m SPC向下翻页 b向上翻页 J 向下滚动一行 K 向上滚动一行 > 右移一屏 < 左移一屏 TAB 转到下个超链接 ...
- PhoneGap 的存储 API_localStorage 和 sessionStorage
一.介绍 1.为了替代Cookile这门古老的客户端存储技术,Html5的WEB Storage Api 提供了俩中在 客户端存储数据库的方法:localStorage 和 sessionStorag ...
- Java -- Arrays.asList()方法
Arrays.asList() 是将数组作为列表 问题来源于: public class Test { public static void main(String[] args) { int[] a ...
- 理解JavaScript闭包(closure)
闭包听了很多次了,可是到底有那些具体的用法还是不清楚,看了<JavaScript高级程序设计>,有点明白了. 1.闭包的定义: 闭包其实就是一个函数,而这个函数有点特别,它能够访问另一个函 ...
- image_pyradid和自己的一些训练经验总结
这是训练的路锥.警示柱的数据,也就是小物体的.小物体有两个定义,一个是本身像素少,另一个是物体相对于整张图片的比例小 这是把图片缩小到600 proposal_target_layer选取用来训练的p ...
- fullCalendar日程管理
//日程安排 function timeTable(id){ var inner = "<div id='calendar'></div>"; $(&quo ...
- layUI不同页面传参数
//页面一的方法 function modifyHotSearch(id){ layer.open({ type:2, title:"修改热门搜索", area: ['600px' ...
- 【题解】洛谷P2375 [NOI2014] 动物园(KMP)
洛谷P2375:https://www.luogu.org/problemnew/show/P2375 思路 这道题可以说是完全刷新了本蒟蒻对KMP的理解 感觉对next数组的理解上升到一个新的高度 ...
- 如何在jsp页面获取系统时间
<%@ page import="java.util.*"%> //获取系统时间必须导入的 <%@ page import="java.text.*&q ...