css预编译器

哈哈哈

今天对三个预编译器汇总一下，贼好用，哈哈哈。
Less：http://lesscss.cn/
Sass：https://www.sasscss.com/
Stylus：http://stylus-lang.com/

hia~ hia~ hia~哈哈哈

例子

下面用stylus 举一个案例
stylus代码(style.styl)：

border()
  -webkit-border: arguments
  -moz-border: arguments
  border: arguments
color = { red:#f00, green:#0f0, blue:#00f, black:#000}
table
  margin 0 auto
  text-align center
  for row in 1..18
    tr:nth-child({row})
      display block
      border(1px solid #000)
      padding 4px 8px
      animation  kan 3s infinite linear
      animation-delay (row * 100ms)
      if row % length(color) == 1
        color: color['red']
      else if row % length(color) ==2
        color: color['green']
      else if row % length(color) ==3
        color: color['blue']
      else
        color: color['black']
        font-size 30px
        font-style italic
      td
        border(1px solid yellow)
$keyframe-name = kan
@keyframes {$keyframe-name}
  for i in 0..10
      {10% * i}
        if i<=5
          opacity (i / 5)
        else
          opacity (2 - i / 5)

生成的CSS代码(style.css)：

table {
  margin: 0 auto;
  text-align: center;
}
table tr:nth-child(1) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 100ms;
  color: #f00;
}
table tr:nth-child(1) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
table tr:nth-child(2) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 200ms;
  color: #0f0;
}
table tr:nth-child(2) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
table tr:nth-child(3) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 300ms;
  color: #00f;
}
table tr:nth-child(3) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
table tr:nth-child(4) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 400ms;
  color: #000;
  font-size: 30px;
  font-style: italic;
}
table tr:nth-child(4) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
table tr:nth-child(5) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 500ms;
  color: #f00;
}
table tr:nth-child(5) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
table tr:nth-child(6) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 600ms;
  color: #0f0;
}
table tr:nth-child(6) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
table tr:nth-child(7) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 700ms;
  color: #00f;
}
table tr:nth-child(7) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
table tr:nth-child(8) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 800ms;
  color: #000;
  font-size: 30px;
  font-style: italic;
}
table tr:nth-child(8) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
table tr:nth-child(9) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 900ms;
  color: #f00;
}
table tr:nth-child(9) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
table tr:nth-child(10) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 1000ms;
  color: #0f0;
}
table tr:nth-child(10) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
table tr:nth-child(11) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 1100ms;
  color: #00f;
}
table tr:nth-child(11) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
table tr:nth-child(12) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 1200ms;
  color: #000;
  font-size: 30px;
  font-style: italic;
}
table tr:nth-child(12) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
table tr:nth-child(13) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 1300ms;
  color: #f00;
}
table tr:nth-child(13) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
table tr:nth-child(14) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 1400ms;
  color: #0f0;
}
table tr:nth-child(14) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
table tr:nth-child(15) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 1500ms;
  color: #00f;
}
table tr:nth-child(15) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
table tr:nth-child(16) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 1600ms;
  color: #000;
  font-size: 30px;
  font-style: italic;
}
table tr:nth-child(16) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
table tr:nth-child(17) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 1700ms;
  color: #f00;
}
table tr:nth-child(17) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
table tr:nth-child(18) {
  display: block;
  -webkit-border: 1px solid #000;
  -moz-border: 1px solid #000;
  border: 1px solid #000;
  padding: 4px 8px;
  animation: kan 3s infinite linear;
  animation-delay: 1800ms;
  color: #0f0;
}
table tr:nth-child(18) td {
  -webkit-border: 1px solid #ff0;
  -moz-border: 1px solid #ff0;
  border: 1px solid #ff0;
}
@-moz-keyframes kan {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.2;
  }
  20% {
    opacity: 0.4;
  }
  30% {
    opacity: 0.6;
  }
  40% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  70% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes kan {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.2;
  }
  20% {
    opacity: 0.4;
  }
  30% {
    opacity: 0.6;
  }
  40% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  70% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}
@-o-keyframes kan {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.2;
  }
  20% {
    opacity: 0.4;
  }
  30% {
    opacity: 0.6;
  }
  40% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  70% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}
@keyframes kan {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.2;
  }
  20% {
    opacity: 0.4;
  }
  30% {
    opacity: 0.6;
  }
  40% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  70% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}

结果对比

style.styl 35行
style.css 422行

哈哈 是不是stylus 编译器可以为你节省好多时间，你可以用节省的时间尽情的挥霍吧！哈哈哈哈

明天的你一定会感谢现在拼命的自己！