【スニペット】style sheet (stylus)
僕はカッコ付けるの面倒なので、インデントベースの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%)