推荐去张鑫旭大神这里详细了解: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. MySQL root 密码修改

    小伙伴要在以前的服务器上装个代码版本控制的软件,要用到数据库,可是想来找去root密码还是忘了,其他已经安装的服务都是用的专用账户配置文件里要找不到root用户的密码.用以下方法将密码强制修改掉: 1 ...

  2. css3打包后自动追加前缀插件:autoprefixer

    用vue-cli构建的项目脚手架已经帮你把autoprefixer的配置做好了,自己不需要做什么改动就会自动加前缀: 下面一起看看涉及到autoprefixer这个插件的一些配置: 1,postcss ...

  3. NodeJS require路径

    项目需要用nodejs,感觉nodejs是前端装逼神器了,是通向全栈工程师的必经之路哇,接下来开始踏上学习nodejs的征程.下面是第一个hello,world的程序. 1.server.js文件,这 ...

  4. response.setHeader()下载的用法

    1. HTTP消息头 (1)通用信息头 即能用于请求消息中,也能用于响应信息中,但与被传输的实体内容没有关系的信息头,如Data,Pragma 主要: Cache-Control , Connecti ...

  5. Python爬虫教程-19-数据提取-正则表达式(re)

    本篇主页内容:match的基本使用,search的基本使用,findall,finditer的基本使用,匹配中文,贪婪与非贪婪模式 Python爬虫教程-19-数据提取-正则表达式(re) 正则表达式 ...

  6. linux常用命令(50个)

    1. find 基本语法参数如下: find [PATH] [option] [action] # 与时间有关的参数: -mtime n : n为数字,意思为在n天之前的“一天内”被更改过的文件: - ...

  7. 【Leetcode】【Easy】Reverse Linked List

    题目: Reverse a singly linked list. 解题: 反转单链表,不再多介绍了. 如果会“先条件->定参数->确定不变式->验证后条件”的思维方法,一定会bug ...

  8. 使用UIWebView中html标签显示富文本

    使用UIWebView中html标签显示富文本 用UIWebView来渲染文本并期望达到富文本的效果开销很大哦! Work 本人此处直接加载自定义字体"新蒂小丸子体",源码不公开, ...

  9. Can't create new folder in windows7

    First, please use System File Checker tool to troubleshoot(诊断) this issue. If the issue persists, im ...

  10. UNIX和linux系统性能监控工具oswatcher

    可以在一台机器上运行oswatcher.把运行的结果拷贝到有vnc的机器上进行分析.java -jar oswbba.jar -i /mnt/hgfs/database/oswbb/archive . ...