[{"data":1,"prerenderedAt":73},["ShallowReactive",2],{"content:\u002Fposts\u002F2022\u002Fsass-mini-atomic-pattern-library":3,"surround:\u002Fposts\u002F2022\u002Fsass-mini-atomic-pattern-library":62},{"id":4,"title":5,"body":6,"canonical":41,"categories":42,"date":44,"description":45,"draft":46,"extension":47,"image":48,"meta":49,"navigation":50,"path":51,"permalink":41,"readingTime":52,"recommend":41,"references":41,"seo":57,"sitemap":58,"stem":59,"tags":60,"type":41,"updated":44,"__hash__":61},"content\u002Fposts\u002F2022\u002Fsass-mini-atomic-pattern-library.md","sass实现一个简易的原子样式库",{"type":7,"value":8,"toc":35},"minimark",[9,14,25,29],[10,11,13],"h2",{"id":12},"_variablesscss","_variables.scss",[15,16,22],"pre",{"className":17,"code":19,"language":20,"meta":21},[18],"language-css","$colors: (\n  \"white\": #ffffff,\n  \"primary\": #367ee8,\n  \"primary-light\": #e9f0ff,\n  \"bg\": #f3f6fd,\n  \"gray\": #ccc,\n  \"gray-sm-dark\": #777,\n  \"gray-dark\": #555,\n  \"black\": #222,\n  \"success\": #22c55e,\n  \"success-light\": rgba(145, 191, 111, 0.25),\n  \"error\": #dc2626,\n  \"error-light\": #dc2626,\n  \"warning\": rgb(211, 151, 33),\n  \"warning-light\": #fff0e3,\n  \"gray-bg\": rgb(241, 241, 241),\n);\n$spacing-base-size: 1rem;\n\n$flex-jc: (\n  start: flex-start,\n  end: flex-end,\n  center: center,\n  between: space-between,\n  around: space-around,\n);\n$flex-ai: (\n  start: flex-start,\n  end: flex-end,\n  center: center,\n  stretch: stretch,\n);\n\n\u002F\u002F spacing\n$spacing-types: (\n  m: margin,\n  p: padding,\n);\n$spacing-directions: (\n  t: top,\n  b: bottom,\n  l: left,\n  r: right,\n);\n$spacing-sizes: (\n  0: 0,\n  1: 0.25,\n  2: 0.5,\n  3: 1,\n  4: 1.5,\n  5: 3,\n);\n\n\u002F\u002F border-radius\n$radiu-sizes: (\n  0: 0,\n  1: 0.25,\n  2: 0.5,\n  3: 1,\n  4: 1.5,\n  5: 3,\n);\n\n$button-radius: 0.3rem;\n\n$font-sizes: (\n  \"base\": 1rem,\n  \"sm\": 0.9rem,\n  \"xs\": 0.8rem,\n  \"lg\": 1.2rem,\n);\n","css","",[23,24,19],"code",{"__ignoreMap":21},[10,26,28],{"id":27},"mainscss","main.scss",[15,30,33],{"className":31,"code":32,"language":20,"meta":21},[18],"@import \".\u002F_variables.scss\";\n\n@each $colorKey, $color in $colors {\n  \u002F\u002F 文字颜色\n  .text-#{$colorKey} {\n    color: $color;\n  }\n\n  \u002F\u002F 背景色\n  .bg-#{$colorKey} {\n    background-color: $color;\n  }\n}\n\n.bloder {\n  font-weight: bolder;\n}\n\n\u002F\u002F 文字对齐方式\n@each $var in (left, center, right) {\n  .text-#{$var} {\n    text-align: $var !important;\n  }\n}\n\n\u002F\u002F text-overflow\n.text-ellipsis {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\u002F\u002F width, height\n.w-screen {\n  width: 100vw;\n}\n.h-screen {\n  height: 100vh;\n}\n.w-full {\n  width: 100%;\n}\n.h-full {\n  height: 100%;\n}\n\n\u002F\u002F flex\n.flex {\n  display: flex;\n}\n.flex-col {\n  flex-direction: column;\n}\n.flex-wrap {\n  flex-wrap: wrap;\n}\n.flex-1 {\n  flex: 1;\n}\n.flex-grow-1 {\n  flex-grow: 1;\n}\n\n@each $key, $value in $flex-jc {\n  .jc-#{$key} {\n    justify-content: $value;\n  }\n}\n@each $key, $value in $flex-ai {\n  .ai-#{$key} {\n    align-items: $value;\n  }\n}\n\n\u002F\u002F m-0, mx-0\n@each $typeKey, $type in $spacing-types {\n  \u002F\u002F .m-1\n  @each $sizeKey, $size in $spacing-sizes {\n    .#{$typeKey}-#{$sizeKey} {\n      #{$type}: $size * $spacing-base-size;\n    }\n  }\n  \u002F\u002F .mx-1 , .my-1\n  @each $sizeKey, $size in $spacing-sizes {\n    .#{$typeKey}x-#{$sizeKey} {\n      #{$type}-left: $size * $spacing-base-size;\n      #{$type}-right: $size * $spacing-base-size;\n    }\n    .#{$typeKey}y-#{$sizeKey} {\n      #{$type}-top: $size * $spacing-base-size;\n      #{$type}-bottom: $size * $spacing-base-size;\n    }\n  }\n  \u002F\u002F .mt-1\n  @each $directionKey, $direction in $spacing-directions {\n    @each $sizeKey, $size in $spacing-sizes {\n      .#{$typeKey}#{$directionKey}-#{$sizeKey} {\n        #{$type}-#{$direction}: $size * $spacing-base-size;\n      }\n    }\n  }\n}\n\n\u002F\u002F border-radius\n\n@each $sizeKey, $size in $radiu-sizes {\n  .round-#{$sizeKey} {\n    border-radius: $size * $spacing-base-size;\n  }\n}\n\n\u002F\u002F overflow\n.hidden {\n  overflow: hidden;\n}\n\n\u002F\u002F border\n$border-color: map-get($colors, \"gray\");\n.border-0 {\n  border: 0px !important;\n}\n@each $dir in (top, right, left, bottom) {\n  .border-#{$dir} {\n    border-#{$dir}: 1px solid $border-color;\n  }\n}\n\n\u002F\u002F shadow\n.shadow-md {\n  box-shadow: 0px 2rpx 2rpx 10rpx rgba(0, 0, 0, 0.02);\n}\n\n@each $key, $value in $font-sizes {\n  .font-#{$key} {\n    font-size: $value;\n  }\n}\n\n.border-b {\n  border-bottom: 1px solid map-get($map: $colors, $key: \"gray\");\n}\n",[23,34,32],{"__ignoreMap":21},{"title":21,"searchDepth":36,"depth":36,"links":37},4,[38,40],{"id":12,"depth":39,"text":13},2,{"id":27,"depth":39,"text":28},null,[43],"代码","2022-12-04 16:00:20","用 sass 实现一个简易的原子样式库。通过此了解 sass 基础语法的实际使用。",false,"md","https:\u002F\u002Fbitmc.uno\u002Fpicgo\u002F67a228116d770-78.webp",{},true,"\u002Fposts\u002F2022\u002Fsass-mini-atomic-pattern-library",{"text":53,"minutes":54,"time":55,"words":56},"3 min read",2.195,131700,439,{"title":5,"description":45},{"loc":51},"posts\u002F2022\u002Fsass-mini-atomic-pattern-library",[],"3W9W0hUpehHFe_6B7_NUH5D8K0PK9kizaFvPG4FqruE",[63,68],{"title":64,"path":65,"stem":66,"date":67,"type":41,"children":-1},"sass 常用语法","\u002Fposts\u002F2022\u002Fsass","posts\u002F2022\u002Fsass","2022-12-04 15:59:32",{"title":69,"path":70,"stem":71,"date":72,"type":41,"children":-1},"git统计代码提交数量","\u002Fposts\u002F2022\u002Fgit-log","posts\u002F2022\u002Fgit-log","2022-12-04 16:01:16",1789642596266]