.User
  .User-Icon(style="background: url(https://placehold.jp/160x160.png) no-repeat center; background-size: cover;")
  .User-Name UserName
View Compiled 
//円をつくるcircleプロパティを自作する
circle(LENGTH)
  width LENGTH
  height LENGTH
  border-radius 50%
  
.User
  display flex
  flex-direction column
  align-items center
  & > * + *
    margin-top 4px
  &-Icon
    //circleプロパティを使用する
    circle 80px
    background #BBBBBB
    display flex
    justify-content center
    align-items center

  &-Name
    font-size 16px
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.