sass example

sass-example.sass

//  Agenda user
#agenda-user
  overflow: hidden
  margin: 15px
  #agenda-user-list-area
    width: 290px
    float: left
    #agenda-user-list-container
      +size(100%, 260px)
      overflow: hidden
      .no-js &:hover
        overflow-y: auto
    ol
      width: 100%
      li
        +icon("calendar.png", 7px, 10px, 0.5)
        border: 1px solid #f1f1f1
        overflow: hidden
        line-height: 33px
        margin: 0 0 15px 0
        background-color: #fafafa
        &#aul-label-sheduled
          +reset-style()
          color: darken(#cfcfcf, 10)
          font-size: 12px
          margin: 0
        &#aul-label-past
          +reset-style()
          color: darken(#cfcfcf, 10)
          font-size: 12px
          margin: 0
        &:hover, &.aul-item-active
          background-color: darken(#fafafa, 5)
          border-color: darken(#f1f1f1, 5)
          .aul-data
            border-color: darken(#f1f1f1, 5)
          &:after
            +opacity(1)
        &:after
          +absTR(10px, 10px)
          +size(0, 0)
          +opacity(0)
          +transition()
          content: ""
          z-index: 1
          border-top: 6px solid transparent
          border-bottom: 6px solid transparent
          border-left: 6px solid $cor-laranja
        a
          font-size: 13px
          color: darken(#cfcfcf, 10)
          text-decoration: none
        span
          display: block
          float: left
          padding: 0 10px
          &.aul-data
            width: 25%
            border-right: 1px solid #f1f1f1
            text-indent: 28px
          &.aul-specialty
            +ellipsis()
            width: 60%