scss 文本样式基础变量和mixin重用它

Posted 2021-05-18

$font-sizes: (
  xxxs: (fs:12px, lh:1.167),
  xxs: (fs:14px, lh:1.21),
  xs: (fs:17px, lh:1.235),
  s: (fs:19px, lh:1.21),
  m: (fs:21px, lh:1.19),
  l: (fs:35px, lh:1.14),
  xl: (fs:48px, lh:1.167),
  xxl: (fs:100px, lh:1.18),
  xxxl: (fs:110px, lh:0.735)
);

// Usage: @include t-font-basic-sizing(xs);
@mixin t-font-basic-sizing($sizename:m, $enable-additional-styling:true) {
  font-size:map-get(map-get($font-sizes,$sizename),fs); 
  line-height:map-get(map-get($font-sizes,$sizename),lh); 
	
  // additional styling for some combinations
  @if index((xs s), $sizename) and $enable-additional-styling == true {
    font-weight:bold; 
  }
}