stylus 实践

音乐分享：

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

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

上代码：

_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报错报的怀疑人生

就因为缩进。。。。

参考资料：

stylus : 官网

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

张鑫旭 : 《stylus中文文档》

stylus 实践的更多相关文章

CSS预处理器——Sass、LESS和Stylus实践
CSS(Cascading Style Sheet)被译为级联样式表,做为一名前端从业人员来说,这个专业名词并不陌生,在行业中通常称之为“风格样式表(Style Sheet)”,它主要是用来进行网页风 ...
CSS预处理器——Sass、LESS和Stylus实践【未删减版】
http://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html
sass教程汇总
Sass @at-root http://www.w3cplus.com/preprocessor/Sass-3-3-new-feature-at-root-bem.html Sass中连体符(&am ...
Sass介绍及入门教程
Sass是什么? Sass是"Syntactically Awesome StyleSheets"的简称.那么他是什么?其实没有必要太过于纠结,只要知道他是“CSS预处理器”中的一 ...
Sass带来的变革_sass, scss 教程_w3cplus - Google Chrome
Sass带来的变革作者:大漠日期:2014-11-17 点击:5291 sass scss 接触Sass差不多有一个年头了,在这一年来的时间中,也花了不少心思在Sass的学习上.同时也让自己喜欢上 ...
SASS环境搭建及HBuilder中sass预编译配置
---------------------------------Ruby环境安装-------------------------------- 至于为什么要安装ruby环境请移步:https:// ...
LessCss学习笔记
一.入门 1.LESSCSS是什么? LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量.继承.运算.函数等,更方便CSS的编 ...
sass、less和stylus的安装使用和入门实践
刚开始的时候,说实话,我很反感使用css预处理器这种新玩意的,因为其中涉及到了编程的东西,私以为很复杂,而且考虑到项目不是一天能够完成的,也很少是一个人完成的,对于这种团队的项目开发,前端实践用c ...
vue2.0 transition -- demo实践填坑
前言 vue1.0版本和2.0版本的过渡系统改变还是蛮彻底的,具体请自行详看文档介绍:https://vuefe.cn/v2/guide/migration.html#过渡.在使用2.0版本做过渡效果 ...

随机推荐

CentOS配置svn
参考: https://www.cnblogs.com/taohaijun/p/7172939.html 1.检查已安装版本 rpm -qa subversion 卸载旧版本SVN yum remo ...
MySQL函数--（1）
/*函数与存储过程的区别1.存储过程:可以有0个返回值,可以有多个返回值函数:有且仅有一个返回值*/ #创建语法create FUNCTION 函数名(参数列表) return 返回类型BEGIN函数 ...
LR socket协议脚本
socket协议分为TCP.UDP两种(区别与联系在此不做赘述),一种为长连接.一种为短连接.如果创建连接时在init中对应关闭连接在end中,则为长连接:如果创建关闭连接都是在action则为短连接 ...
Flutter路由导航Navigator
第一点:push使用 1.pushNamed——Navigator.of(context).pushNamed('routeName'); 此种方法只是简单的将我们需要进入的页面push到栈顶,以此来 ...
其他综合-内网下Yum仓库搭建配置
内网下Yum仓库搭建配置 1.实验环境虚拟机环境: VMware 12 版本虚拟机网络环境: 内网 IP 段:172.16.1.0 外网 iP 段(模拟):10.0.0.0 实验基础:(能够上网, ...
SolidWorks装配体
Python之Mock的入门
参考文章: https://segmentfault.com/a/1190000002965620 一.Mock是什么 Mock这个词在英语中有模拟的这个意思,因此我们可以猜测出这个库的主要功能是模拟 ...
C++中typedef enum 和 enum
在C++中,这两种定义枚举类型的关键字用法和效果相同,推荐使用前者.typedef enum多用在C语言中. 在C语言中,如果使用typedef enum定义一个枚举类型,比如: typedef en ...
Linux系统 Cetos 7 中重置root密码
几个月前在自己电脑上面安装了一个Linux 的虚拟机环境,当时是为了测试某一个小功能,用完就扔那里了,长时间没有使用,发现Root密码忘记了,登陆不了,怎么办呢?(ps:如果实际情况中忘记密码的这个服 ...
KEIL之工程单独文件属性修改
@2019-04-29 [小记] 可以设置文件是否参与编译.内存分配.宏定义等属性设置

stylus 实践

stylus 实践的更多相关文章

随机推荐

热门专题