上間ウェブ店

【スニペット】style sheet (stylus)

2019/06/12

僕はカッコ付けるの面倒なので、インデントベースのstylusを愛用しています。
なのでstylusの記法でよく使うけど覚えにくいスタイルを、コピペしやすいように書き出してみました。

真ん中寄せ(position + transform: translate)

.element-wrap
  position relative

.element
  position absolute

.element.element--Y
  top 50%
  transform translateY(-50%)

.element.element--X
  left 50%
  transform translateX(-50%)

.element.element--both
  top 50%
  left 50%
  transform translate(-50%, -50%)

反転

.element.flip--Y
  transform scale(-1, 1)

.element.flip--X
  transform scale(1, -1)

Grid

.grid
  display grid
  grid-template-areas 'd l' 't l'
  grid-template-columns 300px 1fr
  grid-template-rows auto
  &__item:nth-type-of(1)
    grid-area d
  &__item:nth-type-of(2)
    grid-area t
  &__item:nth-type-of(3)
    grid-area l

Flex

flex-flow (shorthand of flex-direction&flex-wrap)

.flex-container
  display flex
  flex-flow row nowrap /*default*/
  flex-flow row wrap
  flex-flow row-reverse nowrap
  flex-flow row-reverse wrap
  flex-flow column nowrap
  flex-flow column wrap
  flex-flow column-reverse nowrap
  flex-flow column-reverse wrap

justify-content

.flex-container
  display flex
  justify-content flex-start /*dafault*/
  justify-content flex-end
  justify-content center
  justify-content space-between
  justify-content space-around

align-items

.flex-container
  display flex
  align-items stretch /*dafault*/
  align-items flex-start
  align-items flex-end
  align-items center
  align-items baseline

flex item

.flex-item
  flex 0 0 auto
  flex 0 0 25%
  flex 0 0 250px

center all

.flex-container
  display flex
  flex-flow row wrap
  justify-content center
  align-items center

疑似要素三角

.element
  position relative
  &:before
    display block
    width 0
    height 0
    border-style solid
    border-width 50px 0 50px 100px
    border-color transparent transparent transparent #007bff
    position absolute
    top 50%
    right 0
    transform translateX(-50%)