网页设计 html attr与自定义名称

By geo
web html

pug

div(data-type='small' data-color='red') 按钮
div(data-type='medium' data-color='green') 按钮
div(data-type='large' data-color='blue') 按钮

sass

*
  // background-color:#333
  color: black 
  
@mixin size($w,$h)
  width : $w
  height : $h
  
div
  border: solid 2px black
  +size(150px,150px)
  // &::before

div[data-type='medium']
  +size(200px,200px)
  
div[data-type='large']
  +size(250px,250px)