推荐去张鑫旭大神这里详细了解:http://www.zhangxinxu.com/jq/stylus/

安装

  npm install -g stylus

自动编译
  $ stylus -w demo.styl -o dist / demo.styl是styl文件,dist是要生成样式的目录文件名,-w 是自动监视文件 ,-o 是将编译后的CSS文件输出到指定文件中

压缩

  stylus --compress < test.styl > test.css  //stylus文件编译并压缩成css文件

导入(@import)

@import "./demo1"

变量(Variables)

font-size = 14px
body
font font-size Arial, sans-seri
body {
font:14px Arial, sans-seri;
}

媒体(@media)
——stylus——

.widget
padding 10px
@media screen and (min-width: 600px)
padding 20px

——css——

.widget {
padding: 10px;
}
@media screen and (min-width: 600px) {
.widget {
padding: 20px;
}
}

好像传不了文件,有初始化样式,和兼容样式的两个小文件,传不送来,需要的留言我就行。

stylus(css预编译器)的更多相关文章

  1. 在 CSS 预编译器之后:PostCSS

    提到css预编译器(css preprocessor),你可能想到Sass.Less以及Stylus.而本文要介绍的PostCSS,正是一个这样的工具:css预编译器可以做到的事,它同样可以做到. “ ...

  2. CSS预编译器

    零.CSS预编译器 CSS预处理器是指对生成CSS前的某一语法的处理.CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,供项目使用 CSS预处理器为CSS增加一 ...

  3. CSS预编译器配置-------LESS Sass Stylus webstorm

    预编译器配置说明 开头语,发挥CSS预处器的作用是一种很有挑战性的事情.CSS预处器有不同的语言,就有不同的语法和功能. 语法 在使用CSS预处器之前最重要的是对语法的理解,幸运的是,这三种CSS预处 ...

  4. css预编译器——Less的使用

      方法一:仅介绍在客户端环境下使用的方法 1 新建test.less并引入.less该文件(和css一样在head处引入),注意rel="stylesheet/less": &l ...

  5. 前端学习笔记系列一:6 一种新的css预编译器stylus

    stylus是 CSS 的预处理框架.CSS 预处理,顾名思义,预先处理 CSS.那 stylus 咋预先处理呢?stylus 给 CSS 添加了可编程的特性,也就是说,在 stylus 中可以使用变 ...

  6. CSS预编译器:Sass(入门),更快的前端开发

    SASs是由美国注册会计师协会(AICPA)下属审计准则委员会(ASB)发布,是为了便于注册会计师执行和落实一般公认审计准则(GAAS). Sass 扩展了 CSS3,增加了规则.变量.混入.选择器. ...

  7. CSS预编译器less简单用法

    1.变量 定义变量 @变量名:值; @test_width:100px; 使用变量 .box{ width:@test_width; height:@test_width; background-co ...

  8. CSS预编译器:Sass(进阶),更快的前端开发

    1.@if     @if 指令是一个 SassScript,它可以根据条件来处理样式块,如果条件为 true 返回一个样式块,反之 false 返回另一个样式块 在 Sass 中除了 @if 之,还 ...

  9. CSS预编译与PostCSS以及Webpack构建CSS综合方案

    CSS全称Cascading Style Sheets(层叠样式表),用来为HTML添加样式,本质上是一种标记类语言.CSS前期发展非常迅速,1994年哈肯·维姆·莱首次提出CSS,1996年12月W ...

随机推荐

  1. java.lang.NullPointerException: Attempt to invoke virtual method 'java.util.List com.yunweather.app.db.YunWeatherDB.loadProvinces()' on a null object reference

    NullPointerException:查看自己的什么地方是否对空指针进行了操作 Attempt to invoke virtual method 'java.util.List com.yunwe ...

  2. ugui之圆角矩形头像实现

    这个是参考大神的修改了一下渲染方式实现的,可以去查看原帖的,原贴是圆形头像,原理讲的非常详细 点击这里 我写的这个只支持正方形图片,效果是酱紫的~ 一共三个代码,还需要两个代码,原帖里都有的,我只是修 ...

  3. hdu 1162 Eddy's picture (Kruskal 算法)

    题目连接:http://acm.hdu.edu.cn/showproblem.php?pid=1162 Eddy's picture Time Limit: 2000/1000 MS (Java/Ot ...

  4. memset用法详解

    原文:http://www.cnblogs.com/PegasusWang/archive/2013/01/20/2868824.html 1.void *memset(void *s,int c,s ...

  5. 是否应该开启WebView硬件加速?

    android webview 在3.0+后显示flash要启用硬件加速,开启硬件加速也能够使绘制更加平滑. 开启硬件加速是在manifest中加入: android:hardwareAccelera ...

  6. [MFC]选择目录对话框和选择文件对话框

    在MFC编程中经常会需要用到选择目录和选择文件的界面,以下总结一下本人常用的这两种对话框的生成方法: 选择目录对话框 //选择目录按钮void CDcPackerDlg::OnBnClickedDec ...

  7. css3 background-sizing 属性,捎带 background-repeat 属性

    background-sizing: contain: 在指定大小的容器内把图像按照图像本身长宽比扩展到最大尺寸,有可能有留白 cover: 在指定大小的容器内,把图像按照图像本身的长宽比扩展到足够大 ...

  8. python mqtt client publish操作

    使用Python库paho.mqtt.client 模拟mqtt client 连接broker,publish topic. #-*-coding:utf-8-*- import paho.mqtt ...

  9. Tomcat你很少使用的安全管理SecurityManager

    试想一下,如果你的JSP页面中包含一句代码“System.exit(1);”,你的web应用访问到该JSP时,会发生什么? 一般使用tomcat可能都没有注意到这个问题,本篇主要讲述tomcat 6中 ...

  10. 设置C++ cout输出精度

    cout.precision(5); 数字表示小数点位数 // modify precision #include <iostream> // std::cout, std::ios in ...