音乐分享：
Broken Back - 《Halcyon Birds》
————————————————————————————————————————————————————————————————————————————
因为项目正在开发就不截图了
上代码：
_stylus-base.styl 基础混合（sass版本的变形）:
1 //清楚标签默认样式 2 normalize() 3 html 4 margin: 0 5 padding: 0 6 border: 0 7 body 8 div 9 span 10 object 11 iframe 12 h1 13 h2 14 h3 15 h4 16 h5 17 h6 18 p 19 blockquote 20 pre 21 a 22 abbr 23 acronym 24 address 25 code 26 del 27 dfn 28 em 29 img 30 q 31 dl 32 dt 33 dd 34 ol 35 ul 36 li 37 fieldset 38 form 39 label 40 legend 41 caption 42 tbody 43 tfoot 44 thead 45 article 46 aside 47 dialog 48 figure 49 footer 50 header 51 hgroup 52 nav 53 section 54 margin: 0 55 padding: 0 56 border: 0 57 font-size: 100% 58 vertical-align: baseline 59 ol 60 ul 61 li 62 list-style: none 63 body 64 line-height: 1.5 65 background: white 66 font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif 67 font-size: 12px 68 color: #333 69 table 70 tr 71 th 72 td 73 border-collapse: collapse 74 margin: 0 75 padding: 0 76 font-size: 100% 77 vertical-align: baseline 78 caption 79 th 80 td 81 text-align: left 82 font-weight: normal 83 float: none !important 84 table 85 th 86 td 87 select 88 img 89 input 90 object 91 vertical-align: middle 92 :focus 93 outline: 0 94 input 95 select 96 margin:0 97 a 98 color: #005EA7 99 text-decoration: none 100 a:hover 101 text-decoration:underline 102 p 103 a 104 td 105 word-wrap:break-word 106 word-break:break-all 107 img 108 border: none 109 vertical-align:top 110 textarea 111 resize:none 112 border:1px solid #ccc 113 textarea 114 &:hover 115 border-color:#ccc 116 input[type="text"] 117 input[type="button"] 118 -webkit-appearance: none 119 border-radius: 0 120 font-family:'Microsoft Yahei','黑体', Arial, Helvetica, sans-serif 121 input[type="text"] 122 border:solid 1px #ccc 123 border-radius:0 124 dfn 125 font-style: normal 126 font-family: Arial 127 128 //浮动; 129 float($dir=left ) 130 float: $dir 131 132 //左浮动; 133 fl() 134 float(left) 135 136 //右浮动; 137 fr() 138 float(right) 139 140 //清湖浮动; 141 clear() 142 *zoom:1 143 &:after 144 display:block 145 content: " " 146 height: 0 147 clear: both 148 visibility: hidden 149 overflow: hidden 150 151 //一行显示。。。。; 152 ellipsis() 153 white-space:nowrap 154 text-overflow:ellipsis 155 overflow:hidden 156 157 // 强制折行; 158 break-word() 159 word-break:break-all /*支持IE，chrome，FF不支持*/ 160 word-wrap:break-word /*支持IE，chrome，FF*/ 161 162 //设置文字位置; 163 text-align( $dir=left ) 164 text-align: $dir 165 166 //文字居左; 167 tal() 168 text-align(left) 169 170 //文字居右; 171 tar() 172 text-align(right) 173 174 //文具居中; 175 tac() 176 text-align(center) 177 178 //超出隐藏; 179 over() 180 overflow:hidden 181 182 //取消overflow; 183 ofv() 184 overflow:visible !important 185 186 //隐藏; 187 hide() 188 display:none 189 190 //显示; 191 block() 192 display:block 193 194 //绝对定位; 195 abs() 196 position: absolute 197 198 //相对定位; 199 rel() 200 position: relative 201 202 //鼠标手; 203 cur() 204 cursor: pointer 205 206 //默认鼠标; 207 def() 208 cursor:default 209 210 //透明; 211 opa($num=0.8,$ie=true) 212 opacity:$num 213 if $ie 214 filter:unquote("alpha(opacity="+ $num*100 +")"); 215 216 //设置字体; 217 fa($family='Microsoft Yahei') 218 font-family:$family,'宋体','黑体' 219 220 //设置字号; 221 f($num=12px) 222 font-size:addUnits($num) 223 224 //设置line-height； 225 line($num=12px) 226 line-height:addUnits($num) 227 228 //设置文字颜色; 229 c($val=#333) 230 color:$val 231 232 //设置宽; 233 w($num) 234 addUnits($num) 235 236 //设置高; 237 h($num) 238 height:addUnits($num) 239 240 //设置css3前缀; 241 $vendors ?= moz webkit ms o official 242 css3( $style,arg... ) 243 for $prefix in $vendors 244 if $prefix == official 245 {$style}: arg 246 else 247 -{$prefix}-{$style}: arg 248 249 //css3 圆角; 250 border-radius($radius = 5px) 251 css3( border-radius,$radius ) 252 253 //css3 过度; 254 tran($name=all,$time=0.5s) 255 css3( transition,$name $time ) 256 257 //补全单位 258 $global-unit = 'px' //全局默认单位; 259 addUnits( $num ) 260 if unit($num) == '!important' || unit($num) == 'rem' || unit($num) == 'rpx' 261 $num 262 else 263 if unit($num) != '' 264 $num 265 else 266 unit($num,$global-unit) 267 268 /* 组合 */ 269 //设置宽、高、字体、行高、文字颜色; 270 whflc($args...) 271 w(arguments[0]) 272 h(arguments[1]) 273 f(arguments[2]) 274 line(arguments[3]) 275 c(arguments[4]) 276 277 //设置字体、行高、文字颜色; 278 flc($args...) 279 f(arguments[0]) 280 line(arguments[1]) 281 c(arguments[2])
t-love.styl:
1 @charset "utf-8"; 2 @import "_stylus-base.styl"; 3 normalize() 4 body,html 5 background:#f5f5f5 6 7 .color-pink 8 color:#f11754 9 .content 10 1200px 11 margin:0 auto 12 .t-crumbs 13 font-size:14px 14 line-height:36px 15 .t-love-whiteBg 16 background:#fff 17 .t-love-cont 18 padding:0 0 73px 0; 19 .t-love-h2 20 flc(36px,108px,#333) 21 .t-love-l 22 fl() 23 536px 24 height:376px 25 border:2px solid #e4e4e4 26 img 27 536px 28 height:376px 29 .t-love-r 30 fl() 31 530px 32 margin-left:60px 33 p 34 flc(16px,48px,#333) 35 .t-love-btn 36 display:inline-block; 37 whflc(168px,54px,26px,54px,#fff) 38 background:#f11754 39 tac() 40 border-radius() 41 &:hover 42 text-decoration: none; 43 .btn-top 44 margin-top:75px 45 .clock-ico 46 fr() 47 flc(14px,16px,#666) 48 margin-top:30px 49 padding-left:20px 50 background:url('../i/clock-ico.jpg') no-repeat 0 0; 51 52 .t-love-mainl 53 fl() 54 812px 55 img 56 100% 57 .t-love-mainr 58 fr() 59 360px 60 .t-love-title 61 100% 62 margin:33px 0 15px 0; 63 flc(26px,38px,#333) 64 text-indent:10px 65 border-bottom:4px solid #18afd5 66 .t-love-more 67 fr() 68 margin-top:10px 69 flc(18px,18px,#f11754) 70 .t-love-picMain 71 100% 72 overflow:hidden 73 .t-love-pics 74 380px 75 li 76 fl() 77 110px 78 height:135px 79 margin:0 14px 14px 0 80 clear() 81 img 82 110px 83 height:135px
最后编译的css文件（没开启压缩）:
1 @charset "utf-8"; 2 html { 3 margin: 0; 4 padding: 0; 5 border: 0; 6 } 7 body 8 div 9 span 10 object 11 iframe 12 h1 13 h2 14 h3 15 h4 16 h5 17 h6 18 blockquote 19 pre 20 a 21 abbr, 22 acronym, 23 address, 24 code, 25 del, 26 dfn, 27 em, 28 img, 29 q, 30 dl, 31 dt, 32 dd, 33 ol, 34 ul, 35 li, 36 fieldset, 37 form, 38 label, 39 legend, 40 caption, 41 tbody, 42 tfoot, 43 thead, 44 article, 45 aside, 46 dialog, 47 figure, 48 footer, 49 header, 50 hgroup, 51 nav, 52 section { 53 margin: 0; 54 padding: 0; 55 border: 0; 56 font-size: 100%; 57 vertical-align: baseline; 58 } 59 ol, 60 ul, 61 li { 62 list-style: none; 63 } 64 body { 65 line-height: 1.5; 66 background: #fff; 67 font-family: 'Microsoft Yahei', Arial, Helvetica, sans-serif; 68 font-size: 12px; 69 color: #333; 70 } 71 table, 72 tr, 73 th, 74 td { 75 border-collapse: collapse; 76 margin: 0; 77 padding: 0; 78 font-size: 100%; 79 vertical-align: baseline; 80 } 81 caption, 82 th, 83 td { 84 text-align: left; 85 font-weight: normal; 86 float: none; 87 } 88 table, 89 th, 90 td, 91 select, 92 img, 93 input, 94 object { 95 vertical-align: middle; 96 } 97 :focus { 98 outline: 0; 99 } 100 input, 101 select { 102 margin: 0; 103 } 104 a { 105 color: #005ea7; 106 text-decoration: none; 107 } 108 a:hover { 109 text-decoration: underline; 110 } 111 p, 112 a, 113 td { 114 word-wrap: break-word; 115 word-break: break-all; 116 } 117 img { 118 border: none; 119 vertical-align: top; 120 } 121 textarea { 122 resize: none; 123 border: 1px solid #ccc; 124 } 125 textarea:hover { 126 border-color: #ccc; 127 } 128 input[type="text"], 129 input[type="button"] { 130 -webkit-appearance: none; 131 border-radius: 0; 132 font-family: 'Microsoft Yahei', '9ED14F53', Arial, Helvetica, sans-serif; 133 } 134 input[type="text"] { 135 border: solid 1px #ccc; 136 border-radius: 0; 137 } 138 dfn { 139 font-style: normal; 140 font-family: Arial; 141 } 142 body, 143 html { 144 background: #f5f5f5; 145 } 146 .color-pink { 147 color: #f11754; 148 } 149 .content { 150 width: 1200px; 151 margin: 0 auto; 152 } 153 .t-crumbs { 154 font-size: 14px; 155 line-height: 36px; 156 } 157 .t-love-whiteBg { 158 background: #fff; 159 } 160 .t-love-cont { 161 padding: 0 0 73px 0; 162 } 163 .t-love-h2 { 164 font-size: 36px; 165 line-height: 108px; 166 color: #333; 167 } 168 .t-love-l { 169 float: left; 170 width: 536px; 171 height: 376px; 172 border: 2px solid #e4e4e4; 173 } 174 .t-love-l img { 175 width: 536px; 176 height: 376px; 177 } 178 .t-love-r { 179 float: left; 180 width: 530px; 181 margin-left: 60px; 182 } 183 .t-love-r p { 184 font-size: 16px; 185 line-height: 48px; 186 color: #333; 187 } 188 .t-love-btn { 189 display: inline-block; 190 width: 168px; 191 height: 54px; 192 font-size: 26px; 193 line-height: 54px; 194 color: #fff; 195 background: #f11754; 196 text-align: center; 197 border-radius: 5px; 198 } 199 .t-love-btn:hover { 200 text-decoration: none; 201 } 202 .btn-top { 203 margin-top: 75px; 204 } 205 .clock-ico { 206 float: right; 207 font-size: 14px; 208 line-height: 16px; 209 color: #666; 210 margin-top: 30px; 211 padding-left: 20px; 212 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; 213 } 214 .t-love-mainl { 215 float: left; 216 width: 812px; 217 } 218 .t-love-mainl img { 219 width: 100%; 220 } 221 .t-love-mainr { 222 float: right; 223 width: 360px; 224 } 225 .t-love-title { 226 width: 100%; 227 margin: 33px 0 15px 0; 228 font-size: 26px; 229 line-height: 38px; 230 color: #333; 231 text-indent: 10px; 232 border-bottom: 4px solid #18afd5; 233 } 234 .t-love-more { 235 float: right; 236 margin-top: 10px; 237 font-size: 18px; 238 line-height: 18px; 239 color: #f11754; 240 } 241 .t-love-picMain { 242 width: 100%; 243 overflow: hidden; 244 } 245 .t-love-pics { 246 width: 380px; 247 } 248 .t-love-pics li { 249 float: left; 250 width: 110px; 251 height: 135px; 252 margin: 0 14px 14px 0; 253 *zoom: 1; 254 } 255 .t-love-pics li:after { 256 display: block; 257 content: " "; 258 height: 0; 259 clear: both; 260 visibility: hidden; 261 overflow: hidden; 262 } 263 .t-love-pics img { 264 width: 110px; 265 height: 135px; 266 }
后记：
写stylus老让我想起jade模板
stylus的方法(functions)是和混合宏混在一起的所以有的时候傻傻分不清楚或者说其实就没有方法(functions)
还有就是对空格要求太严格了,最开始编写的时候webpack报错报的怀疑人生
就因为缩进。。。。
参考资料：