实现Styledown自动生成样式指南

时间:2015-07-20 20:54:38

标签: sass markdown documentation-generation auto-generate

我已经安装了https://github.com/styledown/styledown并且我已经开始工作但我无法弄清楚文档......有人可以解释或演示如何包含评论的@example部分吗? / p>

这是我的评论代码

/**
* Component name:
* `.sliding-navigation` - slide out navigation and menu items
*/

这是我想要生成样式指南部分的sass样式:

  .sliding-navigation {
    .sliding-menu-button {
        @include transform(rotate(90deg));
        @include position(fixed, 105px 0 0 -45px);
        @include transition(all .25s linear);

        background-color: $sliding-menu-background;
        border-color: $ilios-orange;
        border-style: solid;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-width: 1px 1px 0;
        box-shadow: 2px 1px 3px rgba(0, 0, 0, .19), inset 1px 0 2px rgba(0, 0, 0, .34);
        color: $sliding-menu-color;
        display: inline-block;
        font-size: $base-font-size *  .9;
        height: 45px;
        margin-bottom: $base-line-height;
        margin-top: 10px;
        outline: none;
        -webkit-overflow-scrolling: touch;
        padding-top: .4em;
        text-align: center;
        width: 120px;
        z-index: 201;

        i {
          @include transform(rotate(-90deg));
          margin-right: 10px;
        }

        &.is-menu-visible {
          @include transform(translateX(220px) rotate(90deg));
        }
      }

      .sliding-menu-content {
    @include position(fixed, 60px auto 0 0);
    @include size(220px 100%);
    @include transform(translateX(-230px));
    @include transition(all .25s linear);
    background: $sliding-menu-background;
    border-right: 1px solid $header-grey;
    box-shadow: 2px 1px 3px rgba(0, 0, 0, .19), inset 1px 0 2px rgba(0, 0, 0, .34);
    color: $sliding-menu-color;
    -webkit-overflow-scrolling: touch;
    padding-top: 2em;
    z-index: 201;

    li {
      a {
        border-bottom: $sliding-menu-border;
        color: $sliding-menu-color;
        display: inline-block;
        padding: .5em;
        padding-left: 20px;
        width: 100%;
      }

      &:hover {
        background-color: $sliding-menu-background-hover;
        color: $sliding-menu-color-hover;
      }
    }

    &.is-menu-visible {
      @include transform(translateX(0));
    }
  }

  .menu-screen {
    @include position(fixed, 0 0 0 0);
    @include transition;
    background: $sliding-menu-background;
    opacity: 0;
    visibility: hidden;
    z-index: 200;

    &.is-menu-visible {
      visibility: visible;
    }
  }
}

0 个答案:

没有答案