UnoCSS学习笔记

2023-11-02 3,351 阅读2分钟

学习文档

笔记

常用样式

border

b-rd-4px 
// 对应的css
.b-rd-4px {
  border-radius: 4px;
}

b-1px
.b-1px {
  border-width: 1px;
}

b-#bbffaa80
.b-#bbffaa80 {
  --un-border-opacity: 0.5;
  border-color: rgb(187 255 170 / var(--un-border-opacity));
}

b-solid
.b-solid {
  border-style: solid;
}

margin

ml-10px
.ml-10px {
  margin-left: 10px;
}

mt-8px
.mt-8px {
  margin-top: 8px;
}

m-x-10px
.m-x-10px {
  margin-left: 10px;
  margin-right: 10px;
}

m-y-10px
.m-y-10px {
  margin-top: 10px;
  margin-bottom: 10px;
}

m-10px
.m-10px {
  margin: 10px;
}

padding

同margin

width 和 height

w-100%
.w-100% {
  width: 100%;
}

w-100px
.w-100px {
  width: 100px;
}

w-10
.w-10 {
  width: 2.5rem;
}

w-100vw
.w-100vw {
  width: 100vw;
}

min-w-100px
.min-w-100px {
  min-width: 100px;
}

flex

flex
.flex {
  display: flex;
}

flex-1
.flex-1 {
  flex: 1 1 0%;
}

flex-col
.flex-col {
  flex-direction: column;
}

flex-justify-center 
.flex-justify-center {
  justify-content: center;
}

flex-items-center
.flex-items-center {
  align-items: center;
}

display

block
.block {
  display: block;
}

inline-block
.inline-block {
  display: inline-block;
}

flex
.flex {
  display: flex;
}

background

bg-red
.bg-red {
  --un-bg-opacity: 1;
  background-color: rgb(248 113 113 / var(--un-bg-opacity));
}

问题

已解决

vscode插件不智能提示

setting(设置)-> 搜索unocss->点击Edit in setting.json 添加下面代码

  "editor.quickSuggestions": {
    "other": "off",
    "comments": "off",
    "strings": "on" // 这个要打开
  }

使用css定义的变量

:root {
  --header-height: 56px;
}

// 使用 '[]'进行包裹
<div class="h-[var(--header-height)]"></div>

待解决

vue3 传参'color' 给unocss,子组件拼接的这种
;审查元素里面显示了class="bg-#ccc" 但没有生效,是不是unocss解析在props之前的问题

github.com/unocss/unoc… 说的是unocss的预期行为,不能计算动态的样式,最后通过 <div :style={background:color}></div> 进行解决

background设置背景图片,没找到原子样式,引用的图片必须要写到 style里面吗