scss パンくずリスト

Posted 2021-05-17

.breadcrumbs
  a(href='/') HOME
  span.breadcrumbs__arrow >
  a(href='#') PAGE
  span.breadcrumbs__arrow >
  span.breadcrumbs__title マークアップとテキスト配置

.breadcrumbs {
  margin: 40px 0 50px;
  @include mediaquery( sm_max ) {
    margin: 20px 0 30px;
  }
  a {
    color: $gray;
    text-decoration: underline;
    &:hover {
      text-decoration: none;
    }
  }
}

.breadcrumbs__arrow {
  padding: 0 5px;
}

.breadcrumbs__title {
  text-transform: uppercase;
}