Просмотр поста

Давно сюда не писал. Не так давно открыл для себя stylus. Это CSS препроцессор. И он крут.

Вот например из реальной жизни:

form-border(color=#9b2)
  border-left 6px solid color

form-shadow(r=0, g=0, b=0, a=0.15)
  box-shadow 0 0 20px rgba(r, g, b, a)

@keyframes login-error
  from
    form-border(#b29)
    form-shadow(187, 34, 153, 0.3)
  to
    form-border()
    form-shadow(0, 0, 0, 0.15)

.login
  margin -100px 0 0 0
  position absolute
  top 50%
  width 100%

  form
    background #fff
    font 12px/15px Arial, Helvetica, sans-serif
    form-border()
    form-shadow(0, 0, 0, 0.15)
    margin 0 auto
    padding 25px 0
    width 600px

    &.error
      animation login-error 2s 1

    input
      box-sizing border-box
      display block
      height 30px
      margin 6px auto
      width 300px
      transition-duration 0.25s

    input[type="text"], input[type="password"]
      border 1px solid rgba(0, 0, 0, 0.2)
      color #666666
      padding 5px

      &:hover
        border-color rgba(0, 0, 0, 0.3)

      &:focus
        border-color rgba(0, 0, 0, 0.4)

    input[type="submit"]
      background #9b2
      border none
      color: #fff;
      font-variant small-caps
      height: 35px;

      &:hover
        background: #ac3

      &:active
        background: #bd4