音乐分享：
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:;
padding:;
border:;
}
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:;
padding:;
border:;
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:;
padding:;
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:;
}
input,
select {
margin:;
}
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:;
font-family: 'Microsoft Yahei', '\9ED1\4F53', Arial, Helvetica, sans-serif;
}
input[type="text"] {
border: solid 1px #ccc;
border-radius:;
}
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:;
}
.t-love-pics li:after {
display: block;
content: " ";
height:;
clear: both;
visibility: hidden;
overflow: hidden;
}
.t-love-pics img {
width: 110px;
height: 135px;
}
后记：
写stylus老让我想起jade模板
stylus的方法(functions)是和混合宏混在一起的所以有的时候傻傻分不清楚或者说其实就没有方法(functions)
还有就是对空格要求太严格了,最开始编写的时候webpack报错报的怀疑人生
就因为缩进。。。。
参考资料：