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 这个 ...
随机推荐
- 二、基于事件的异步编程模式(EAP)
一.引言 在上一个专题中为大家介绍了.NET 1.0中提出来的异步编程模式--APM,虽然APM为我们实现异步编程提供了一定的支持,同时它也存在着一些明显的问题--不支持对异步操作的取消和没有提供对进 ...
- CodeIgniter框架学习要点
以下内容从兄弟连的CI教学视频中摘抄: http://codeigniter.org.cn/tutorials/ ------------------------------------------- ...
- Using the @synchronized Directive
https://developer.apple.com/library/content/documentation/Cocoa/Conceptual/Multithreading/ThreadSafe ...
- springMVC文件上传大小超过限制的问题
[转自]https://my.oschina.net/ironwill/blog/646762 springMVC是一个非常方便的web层框架,我们使用它的文件上传也非常的方便. 我们通过下面的配置来 ...
- shiro注解,初始化资源和权限,会话管理
有具体问题的可以参考之前的关于shiro的博文,关于shiro的博文均是一次工程的内容 注解: 新建一个类: 此时需要有admin的权限才可以执行下面的代码 public class ShiroS ...
- RfcDestinationManager.UnregisterDestinationConfiguration时报错cannot unregister the given destination configuration
在使用NCO访问SAP的RFC时,我的程序代码是这么写的: string destinationName = "EWM_700_GROUP"; IDestinationConfig ...
- Relay GraphQL理解
Relay是构建数据驱动 React 应用的js框架. Relay:特性一.声明式:不再使用一个命令式API与数据存储通讯.而是简单的使用RraphQL声明组件数据需求,让Relay理解如何及什么时候 ...
- Vue教程:Class 与 Style 绑定(四)
绑定 HTML Class 对象语法 ①.添加单个class: <div v-bind:class="{ active: isActive }"></div> ...
- Kubernetes组件与架构
转载请标明出处: 文章首发于>https://www.fangzhipeng.com/kubernetes/2018/09/30/k8s-basic1/ 本文出自方志朋的博客 Kubernete ...
- OpenID Connect Core 1.0(三)验证
OpenID Connect执行终端用户登录或确定终端用户已经登录的验证工作.OpenID Connect 使服务器以一种安全的方式返回验证结果.所以客户可以依靠它.出于这个原因,在这种情况下客户被称 ...