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 这个 ...
随机推荐
- 条件独立(conditional independence) 结合贝叶斯网络(Bayesian network) 概率有向图 (PRML8.2总结)
转:http://www.cnblogs.com/Dzhouqi/p/3204481.html本文会利用到上篇,博客的分解定理,需要的可以查找上篇博客 D-separation对任何用有向图表示的概率 ...
- python UI自动化实战记录五:测试页面2 pageobject
该部分记录测试页面2-StrategyPage,所有页面2上的元素定位.操作.获取属性等方法都写在该类中. 1 页面2继承自BasePage: 2 页面2第一部分写的是所有的定位器 3 页面2第二部分 ...
- Server Error in '/' Application. 报错
控制面板--管理工具--服务--asp.netstate service 设置为自动,并启动
- webpack究竟是什么
在很久很久以前,当我们写一个web网页的时候,js实现的逻辑相对是比较弱的.但随着前端技术的发展,前端能实现的内容越来越多.在js里面加了非常非常多的逻辑,于是呢,我们就发现我们通过这种面向过程的方式 ...
- 2018.09.23模拟总结(T2)
T1,T3我就不说啦,反正也不会.主要想讲的是T2. T2用了一个神奇的算法:折半搜索. 因为这个坑爹的数据范围告诉我们暴搜或是状压会TLE,而一半刚好能卡过去. 折半搜索其实跟暴搜没什么区别,就是折 ...
- [USACO07OPEN]吃饭Dining
嘟嘟嘟 这应该是网络流入门题之一了,跟教辅的组成这道题很像. 把每一只牛看成书,然后对牛拆点,因为每一只牛只要一份,食物和饮料分别看成练习册和答案. #include<cstdio> #i ...
- vue中调用地图
一. vue-amap,一个基于 Vue 2.x 和高德地图的地图组件 这个就不细说了,按照其文档,就能够安装下来. 二. 按照官方提供的方法引入 1.修改webpac.base.conf.js文件 ...
- WIN10下的Docker安装
1.什么是Docker Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化.容器是完全使用沙箱 ...
- iview中position: 'fixed'最顶层z-index
使用iview时候使用<Header :style="{position: 'fixed', width: '100%'}">不是最顶层解决方案 根据样式进行解决在ap ...
- PAT——1013. 数素数
令Pi表示第i个素数.现任给两个正整数M <= N <= 104,请输出PM到PN的所有素数. 输入格式: 输入在一行中给出M和N,其间以空格分隔. 输出格式: 输出从PM到PN的所有素数 ...