stylus 实践

音乐分享：

 

Broken Back - 《Halcyon Birds》

————————————————————————————————————————————————————————————————————————————

因为项目正在开发就不截图了

上代码：

_stylus-base.styl 基础混合（sass版本的变形）:

//清楚标签默认样式
normalize()
 html 
  margin: 0
  padding: 0
  border: 0
 body
 div
 span
 object
 iframe
 h1
 h2
 h3
 h4
 h5
 h6
 p
 blockquote
 pre
 a 
 abbr
 acronym
 address
 code
 del
 dfn
 em
 img
 q
 dl
 dt
 dd
 ol
 ul
 li
 fieldset
 form
 label
 legend
 caption
 tbody
 tfoot
 thead
 article
 aside
 dialog
 figure
 footer
 header
 hgroup
 nav
 section
  margin: 0
  padding: 0
  border: 0
  font-size: 100%
  vertical-align: baseline
 ol
 ul
 li
  list-style: none
 body
  line-height: 1.5
  background: white
  font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif
  font-size: 12px
  color: #333
 table
 tr
 th
 td
  border-collapse: collapse
  margin: 0
  padding: 0
  font-size: 100%
  vertical-align: baseline
 caption
 th
 td
  text-align: left
  font-weight: normal
  float: none !important
 table
 th
 td
 select
 img
 input
 object
  vertical-align: middle
 :focus
  outline: 0
 input
 select
  margin:0
 a
  color: #005EA7
  text-decoration: none
 a:hover 
  text-decoration:underline
 p
 a
 td
  word-wrap:break-word
  word-break:break-all
 img
  border: none
  vertical-align:top
 textarea
  resize:none
  border:1px solid #ccc
 textarea
   &:hover
     border-color:#ccc
 input[type="text"]
 input[type="button"]
  -webkit-appearance: none
  border-radius: 0
  font-family:'Microsoft Yahei','黑体', Arial, Helvetica, sans-serif
 input[type="text"]
  border:solid 1px #ccc
  border-radius:0
 dfn
  font-style: normal
  font-family: Arial

//浮动;
float($dir=left )
 float: $dir
 
//左浮动;
fl()
 float(left)
 
//右浮动;  
fr()
 float(right)

//清湖浮动;
clear()
 *zoom:1
 &:after
  display:block
  content: " "
  height: 0
  clear: both
  visibility: hidden
  overflow: hidden

//一行显示。。。。; 
ellipsis()
 white-space:nowrap
 text-overflow:ellipsis
 overflow:hidden

// 强制折行;
break-word()
 word-break:break-all /*支持IE，chrome，FF不支持*/
 word-wrap:break-word /*支持IE，chrome，FF*/

//设置文字位置;
text-align( $dir=left )
 text-align: $dir

//文字居左;
tal()
 text-align(left)

//文字居右;
tar()
 text-align(right)

//文具居中;
tac()
 text-align(center)

//超出隐藏;
over()
 overflow:hidden

//取消overflow;
ofv()
 overflow:visible !important

//隐藏;
hide()
 display:none

//显示;
block()
 display:block 
  
//绝对定位; 
abs() 
 position: absolute

//相对定位;
rel()
 position: relative

//鼠标手;
cur() 
 cursor: pointer 

//默认鼠标;
def() 
 cursor:default

//透明;
opa($num=0.8,$ie=true)
 opacity:$num
 if $ie
  filter:unquote("alpha(opacity="+ $num*100 +")");

//设置字体;
fa($family='Microsoft Yahei')
 font-family:$family,'宋体','黑体'

//设置字号;
f($num=12px)
 font-size:addUnits($num)

//设置line-height；
line($num=12px)
 line-height:addUnits($num)

//设置文字颜色;
c($val=#333)
 color:$val
 
//设置宽;
w($num)
 width:addUnits($num)

//设置高;
h($num)
 height:addUnits($num)

//设置css3前缀;
$vendors ?= moz webkit ms o official
css3( $style,arg... )
 for $prefix in $vendors
  if $prefix == official
   {$style}: arg
  else
    -{$prefix}-{$style}: arg

//css3 圆角;
border-radius($radius = 5px) 
 css3( border-radius,$radius )

//css3 过度;
tran($name=all,$time=0.5s)
 css3( transition,$name $time )

//补全单位
$global-unit = 'px' //全局默认单位;
addUnits( $num )
  if unit($num) == '!important' || unit($num) == 'rem' || unit($num) == 'rpx' 
   $num
  else
   if unit($num) != ''
    $num
   else
    unit($num,$global-unit)

/* 组合 */
//设置宽、高、字体、行高、文字颜色;
whflc($args...)
 w(arguments[0])
 h(arguments[1])
 f(arguments[2])
 line(arguments[3])
 c(arguments[4])

//设置字体、行高、文字颜色;
flc($args...)
 f(arguments[0])
 line(arguments[1])
 c(arguments[2])

t-love.styl:

@charset "utf-8";
@import "_stylus-base.styl";
normalize()
body,html
 background:#f5f5f5
 
.color-pink
  color:#f11754
.content
  width:1200px
  margin:0 auto
.t-crumbs
  font-size:14px
  line-height:36px
.t-love-whiteBg
  background:#fff
.t-love-cont
  padding:0 0 73px 0;
.t-love-h2
  flc(36px,108px,#333)
.t-love-l
  fl()
  width:536px
  height:376px
  border:2px solid #e4e4e4  
  img
   width:536px
   height:376px
.t-love-r
  fl()
  width:530px
  margin-left:60px
  p
   flc(16px,48px,#333)
.t-love-btn
  display:inline-block;
  whflc(168px,54px,26px,54px,#fff)
  background:#f11754
  tac()
  border-radius()
  &:hover
     text-decoration: none;
.btn-top
  margin-top:75px
.clock-ico
  fr()
  flc(14px,16px,#666)
  margin-top:30px
  padding-left:20px
  background:url('../i/clock-ico.jpg') no-repeat 0 0;

.t-love-mainl
  fl()
  width:812px
  img
   width:100%
.t-love-mainr
  fr()
  width:360px
.t-love-title
  width:100%
  margin:33px 0 15px 0;
  flc(26px,38px,#333)
  text-indent:10px
  border-bottom:4px solid #18afd5
.t-love-more
  fr()
  margin-top:10px
  flc(18px,18px,#f11754)
.t-love-picMain
  width:100%
  overflow:hidden
.t-love-pics
  width:380px
  li
   fl()
   width:110px
   height:135px
   margin:0 14px 14px 0
   clear()
  img
    width:110px
    height:135px

最后编译的css文件（没开启压缩）:

@charset "utf-8";
html {
  margin: 0;
  padding: 0;
  border: 0;
}
body
div
span
object
iframe
h1
h2
h3
h4
h5
h6
blockquote
pre
a
abbr,
acronym,
address,
code,
del,
dfn,
em,
img,
q,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
caption,
tbody,
tfoot,
thead,
article,
aside,
dialog,
figure,
footer,
header,
hgroup,
nav,
section {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  vertical-align: baseline;
}
ol,
ul,
li {
  list-style: none;
}
body {
  line-height: 1.5;
  background: #fff;
  font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #333;
}
table,
tr,
th,
td {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
}
caption,
th,
td {
  text-align: left;
  font-weight: normal;
  float: none;
}
table,
th,
td,
select,
img,
input,
object {
  vertical-align: middle;
}
:focus {
  outline: 0;
}
input,
select {
  margin: 0;
}
a {
  color: #005ea7;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
p,
a,
td {
  word-wrap: break-word;
  word-break: break-all;
}
img {
  border: none;
  vertical-align: top;
}
textarea {
  resize: none;
  border: 1px solid #ccc;
}
textarea:hover {
  border-color: #ccc;
}
input[type="text"],
input[type="button"] {
  -webkit-appearance: none;
  border-radius: 0;
  font-family: 'Microsoft Yahei', '\9ED1\4F53', Arial, Helvetica, sans-serif;
}
input[type="text"] {
  border: solid 1px #ccc;
  border-radius: 0;
}
dfn {
  font-style: normal;
  font-family: Arial;
}
body,
html {
  background: #f5f5f5;
}
.color-pink {
  color: #f11754;
}
.content {
  width: 1200px;
  margin: 0 auto;
}
.t-crumbs {
  font-size: 14px;
  line-height: 36px;
}
.t-love-whiteBg {
  background: #fff;
}
.t-love-cont {
  padding: 0 0 73px 0;
}
.t-love-h2 {
  font-size: 36px;
  line-height: 108px;
  color: #333;
}
.t-love-l {
  float: left;
  width: 536px;
  height: 376px;
  border: 2px solid #e4e4e4;
}
.t-love-l img {
  width: 536px;
  height: 376px;
}
.t-love-r {
  float: left;
  width: 530px;
  margin-left: 60px;
}
.t-love-r p {
  font-size: 16px;
  line-height: 48px;
  color: #333;
}
.t-love-btn {
  display: inline-block;
  width: 168px;
  height: 54px;
  font-size: 26px;
  line-height: 54px;
  color: #fff;
  background: #f11754;
  text-align: center;
  border-radius: 5px;
}
.t-love-btn:hover {
  text-decoration: none;
}
.btn-top {
  margin-top: 75px;
}
.clock-ico {
  float: right;
  font-size: 14px;
  line-height: 16px;
  color: #666;
  margin-top: 30px;
  padding-left: 20px;
  background: url(data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQECAgICAgICAgICAgMDAwMDAwMDAwP/2wBDAQEBAQEBAQEBAQECAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/wgARCAAQAA4DAREAAhEBAxEB/8QAFwAAAwEAAAAAAAAAAAAAAAAABAUGCf/EABkBAAIDAQAAAAAAAAAAAAAAAAQFAgMGB//aAAwDAQACEAMQAAAB1TS94tiMw6sWgxK//8QAGBAAAwEBAAAAAAAAAAAAAAAAAwUGAgT/2gAIAQEAAQUCxPDVTpZnGKcfavIUXUsOz//EACARAAICAgMAAwEAAAAAAAAAAAECAwUEEQYSEwAhIjL/2gAIAQMBAT8Bl5fLfcxoa+PAgxoceEqoVEJi3AWMUfZSABoKx6liwbTBCF+Qc3kl4RYUklRiP5TRsm416xlmJMqprWyQUdf4/adUChw09bbwwUvK66wjx8jKiIB90ibvGPKQiQsqguP06FlcFyOpTTfJ8G8xKPCuHvlbJy8gxLMcg7URLITGr731Ltp3+ogfPTlXcj//xAAjEQABAwQBBAMAAAAAAAAAAAABAgMhAAQRMfASEyJRQWGR/9oACAECAQE/ARahm1eWVlRJ/Z2aNoBeIdDqpB+d/XJoONEu2y0FSUn1nciOCKC2VPKa7PikZx0+8Tyd1//EACAQAAICAgEFAQAAAAAAAAAAAAIDAQQFEhEAEyEiMhT/2gAIAQEABj8Cyts7Vm6y3ZFrCa5wDbkcgKhtWIW0TIjiZIY2gYGY5iS89VMkGQvq79ewt3Fhm9gVLEQqMdttrAzuBffoXJc6zGSwNyo24mk4SIZoOtL7Ngv11gOuKmMmElOoHAkEwH1t46s44cUYJx9SLTKUY0dGlcbXEbLEaQG4JX6B5bMbesSIxP8A/8QAGBABAQEBAQAAAAAAAAAAAAAAAREAIUH/2gAIAQEAAT8hIDCnZRlTgEVzSyvJ2Z0BPYWMlkxeknZBJUUA4hzDFoIZdPiH/9oADAMBAAIAAwAAABCdv//EABgRAQEBAQEAAAAAAAAAAAAAAAERACFR/9oACAEDAQE/EC1JaVWOlGASwxN9EBHIA3oCFcwOQPIACSWDBZgnartBMtiP/8QAGhEBAQEBAQEBAAAAAAAAAAAAAREhMQBBUf/aAAgBAgEBPxAHl1qnEINb0LJKLvjGYnVAYns+j+Gticn4LEwIFxwQUDbniWytyaFElAw1GgQH/8QAFhABAQEAAAAAAAAAAAAAAAAAAQAR/9oACAEBAAE/EGfdPkOQbomzAHD9s2tqaFbNHWJpJJj+0WZ9fpQlDinXZH//2Q==) no-repeat 0 0;
}
.t-love-mainl {
  float: left;
  width: 812px;
}
.t-love-mainl img {
  width: 100%;
}
.t-love-mainr {
  float: right;
  width: 360px;
}
.t-love-title {
  width: 100%;
  margin: 33px 0 15px 0;
  font-size: 26px;
  line-height: 38px;
  color: #333;
  text-indent: 10px;
  border-bottom: 4px solid #18afd5;
}
.t-love-more {
  float: right;
  margin-top: 10px;
  font-size: 18px;
  line-height: 18px;
  color: #f11754;
}
.t-love-picMain {
  width: 100%;
  overflow: hidden;
}
.t-love-pics {
  width: 380px;
}
.t-love-pics li {
  float: left;
  width: 110px;
  height: 135px;
  margin: 0 14px 14px 0;
  *zoom: 1;
}
.t-love-pics li:after {
  display: block;
  content: " ";
  height: 0;
  clear: both;
  visibility: hidden;
  overflow: hidden;
}
.t-love-pics img {
  width: 110px;
  height: 135px;
}

 

后记：

写stylus老让我想起jade模板

stylus的方法(functions)是和混合宏混在一起的所以有的时候傻傻分不清楚或者说其实就没有方法(functions)

还有就是对空格要求太严格了,最开始编写的时候webpack报错报的怀疑人生

就因为缩进。。。。

 

参考资料：

stylus  : 官网

张鑫旭  :  《Stylus-NodeJS下构建更富表现力/动态/健壮的CSS》

张鑫旭  :  《stylus中文文档》