码迷,mamicode.com
首页 > Web开发 > 详细

stylus(css预编译器)

时间:2018-05-27 21:36:17      阅读:1802      评论:0      收藏:0      [点我收藏+]

标签:nbsp   body   install   hang   var   压缩   stylus   文件中   code   

推荐去张鑫旭大神这里详细了解: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预编译器)

标签:nbsp   body   install   hang   var   压缩   stylus   文件中   code   

原文地址:https://www.cnblogs.com/laomi233/p/9097298.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!