classToCSS, 一款自动生成 css
的VSCode
插件
根目录生成 classtocss_global.css 文件,所有 stlye 都编译在里面。需要手动引入至项目能生效得地方
可在全局配置中设置,也可以在根目录新建classtocss_config.json
文件,项目内的配置文件优先级高于全局配置
- unit:值单位
- valuRation:值的缩放比例(宽高、字体、边距等才会缩放)
{
"unit": "px",
"valueRatio": 1
}
插件会在根目录自动生成classtocss_apply.scss
文件,写法如下
.card {
@apply .radius-15 .p-15 .mt-10 .bg-fff;
}
编译后(自定义单位rpx
,缩放比例 2)
.card {
overflow: hidden;
border-radius: 30rpx;
padding: 30rpx;
margin-top: 20rpx;
background-color: #fff;
}
可以在 classtocss_apply.scss 文件中添加更多自定义组合样式
class |
style |
解释 |
mid |
display: flex; align-tiems: center; |
垂直居中 |
center |
display: flex; justify-content: center; |
水平居中 |
mid-center |
display: flex; flex; align-tiems: center; justify-content: center; |
水平垂直居中 |
mid-between |
display: flex; flex; align-tiems: center; justify-content: space-between; |
垂直居中,水平两端对齐 |
mid-around |
display: flex; flex; align-tiems: center; justify-content: space-around; |
垂直居中,水平 space-around |
mid-evenly |
display: flex; flex; align-tiems: center; justify-content: space-eveny; |
垂直居中,水平 space-evenly |
以下语法提供值不满足需求时,可用自定义值语法[]
,如color-[red]
,特殊值不会被配置项缩放值改变
xxx-important 会自动生成xxx !important
class |
style |
解释 |
m-6 |
margin: 6px; |
|
m--6 |
margin: -6px; |
负值 |
mt-6 |
margin-top: 6px; |
|
mr-6 |
margin-right: 6px; |
|
mb-6 |
margin-bottom: 6px; |
|
ml-6 |
margin-left: 6px; |
|
mx-6 |
margin-left: 6px; margin-right: 6px; |
|
my-6 |
margin-top: 6px; margin-bottom: 6px; |
|
class |
style |
解释 |
p-6 |
padding: 6px; |
|
p--6 |
padding: -6px; |
负值 |
pt-6 |
padding-top: 6px; |
|
pr-6 |
padding-right: 6px; |
|
pb-6 |
padding-bottom: 6px; |
|
pl-6 |
padding-left: 6px; |
|
px-6 |
padding-left: 6px; padding-right: 6px; |
|
py-6 |
padding-top: 6px; padding-bottom: 6px; |
|
class |
style |
w-6 |
width: 6px; |
w-full |
width: 100%; |
w-66p |
width: 66%; |
w-66vw |
width: 66vw; |
max-w-600 |
max-width: 60px; |
min-w-60 |
min-width: 60px; |
class |
style |
h-6 |
height: 6px; |
h-full |
height: 100%; |
h-66p |
height: 66%; |
h-66vw |
height: 66vw; |
max-h-600 |
max-width: 60px; |
min-h-60 |
min-width: 60px; |
class |
style |
static |
position: static; |
relative |
position: relative; |
absolute |
position: absolute; |
fixed |
position: fixed; |
sticky |
position: sticky; |
class |
style |
解释 |
top-6 |
top: 6px; |
|
top--6 |
top: -6px; |
负值 |
right-6 |
right: 6px; |
|
bottom-6 |
bottom: 6px; |
|
left-6 |
left: 6px; |
|
class |
style |
z-6 |
z-index: 6; |
class |
style |
border-box |
box-sizing: border-box; |
content-box |
box-sizing: content-box; |
class |
style |
block |
display: block; |
inline |
display: inline; |
inline-block |
display: inline-block; |
flex |
display: flex; |
inline-flex |
display: inline-flex; |
inline-table |
display: inline-table; |
table-caption |
display: table-caption; |
table-cell |
display: table-cell; |
table-column |
display: table-column; |
table-column-group |
display: table-column-group; |
table-footer-group |
display: table-footer-group; |
table-row-group |
display: table-row-group; |
class |
style |
解释 |
f-l |
float: left; |
|
f-r |
float: right; |
|
float-xx |
float: xx |
xx: none、left、right、inlineleft、inline-right |
class |
style |
解释 |
overflow-xx |
overflow: xx; |
xx:visible、hidden、scroll、auto、overlay |
overflow-x-xx |
overflow-x: xx; |
xx:visible、hidden、scroll、auto |
overflow-y-xx |
overflow-y: xx; |
xx:visible、hidden、scroll、auto |
scroll-x |
overflow-x: auto; overflow-y: hidden; |
|
scroll-y |
overflow-x: hidden; overflow-y: auto; |
|
class |
style |
解释 |
visibility-xx |
visibility: xx; |
xx:hidden、visible、collapse |
visible |
visibility: visible; |
|
invisible |
visibility: hidden; |
|
class |
style |
解释 |
row |
flex-direction: row; |
|
col |
flex-direction: column; |
|
col-reverse |
flex-direction: column-reverse; |
|
flex-xx |
flex-direction: xx; |
xx:row、row-reverse、column、column-reverse、col(同 column)、col-reverse(同 column-reverse) |
class |
style |
解释 |
justify-xx |
justify-content: xx; |
xx:center、start、end、flex-start、flex-end、left、right |
space-between、between |
justify-content: space-between; |
|
space-around、around |
justify-content: space-around; |
|
class |
style |
解释 |
justify-items-xx |
justify-items: xx; |
xx:center、startend、flex-start、flex-end、left、right、start |
class |
style |
解释 |
justify-self-xx |
justify-self: xx; |
xx:center 、 start 、 end 、stretcht |
class |
style |
解释 |
items-xx |
align-items: xx; |
xx:center、start、end、flex-start、flex-end、self-start、self-end |
class |
style |
解释 |
content-xx |
align-content: xx; |
xx:center、start、end、flex-start、flex-end |
class |
style |
解释 |
self-xx |
align-self: xx; |
xx:auto、normal、center、stretcht、self-start、self-end、flex-start、flex-end |
class |
style |
解释 |
flex- |
flex-wrap: xx; |
xx 取值范围:wrap、wrap-reverse、nowrap |
class |
style |
解释 |
flex-1 |
flex: 1 1 0%; |
|
flex-grow |
flex-grow: 1; |
|
flex-grow-x |
flex-grow: x; |
x:非负数 |
flex-shrink |
flex-shrink: 1; |
|
flex-shrink-x |
flex-shrink: x; |
x:非负数 |
flex-none |
flex: 0 0 none; |
|
flex-auto |
flex: 1 1 0%; |
|
class |
style |
order-6 |
order: 6; |
class |
style |
font-size-6、fs-6 |
font-size: 6px; |
class |
style |
解释 |
font-weight-xx、fw-xx |
font-size: xx; |
xx:100~900 |
class |
style |
解释 |
font-family-xx、ff-xx |
font-family: xx; |
xx:字体名称 |
class |
style |
解释 |
font-style-xx、fs-xx |
font-style: xx; |
xx:italic、oblique、normal |
italic |
font-style: italic; |
|
class |
style |
解释 |
ls-xx、letter-spaceing-xx |
letter-spaceing: xx; |
xx:任意数字 |
class |
style |
解释 |
lh-xx、line-height-xx |
letter-height: xx; |
xx:如 1、1px、1rem,不会缩放值 |
class |
style |
解释 |
color-xx |
color: #xx; |
xx:十六进制颜色值;注意不需要‘#’,如#fff 写color-fff |
class |
style |
解释 |
border-xx_yy_zzzz |
border: xx yy #zzzz; |
xx:border-width; yy:border-style; zzzz:十六进制颜色值;注意不需要‘#’,如#fff 写color-fff |
border-t-xx_yy_zzzz |
border-top: xx yy #zzzz; |
同上 |
border-r-xx_yy_zzzz |
border-right: xx yy #zzzz; |
同上 |
border-b-xx_yy_zzzz |
border-bottom: xx yy #zzzz; |
同上 |
border-l-xx_yy_zzzz |
border-left: xx yy #zzzz; |
同上 |
class |
style |
round、radius-full |
border-radius: 100% |
r-xx、radius-xx |
border-radius: xxpx |
r-t-xx、radius-t-xx |
border-top-left-radius: xxpx; border-top-right-radius: xxpx |
r-b-xx、radius-b-xx |
border-bottom-left-radius: xxpx; border-bottom-right-radius: xxpx |
r-tl-xx、radius-tl-xx |
border-top-left-radius: xxpx |
r-tr-xx、radius-tr-xx |
border-top-right-radius: xxpx |
r-bl-xx、radius-bl-xx |
border-bottom-left-radius: xxpx |
r-br-xx、radius-br-xx |
border-bottom-right-radius: xxpx |
xx 表示两位数以内的数字,大于两位的数字编译为border-color
,如需要可用自定义语法border-[666]
设置
class |
style |
border-xx |
border-width: xx |
border-t-xx |
border-top-width: xx |
border-r-xx |
border-right-width: xx |
border-b-xx |
border-bottom-width: xx |
border-l-xx |
border-left-width: xx |
xxx 表示三位数以上的十六进制颜色值,两位数的数字会编译为border-width
class |
style |
解释 |
border-xxx |
border-width: xxx |
xxx:十六进制颜色值;注意不需要‘#’,如#fff 写color-fff |
class |
style |
解释 |
border-xx |
border-style: xx |
xx:none、dotted、dashed、solid、double、groove、ridge、inset、outset |
设置值需要放大 100 倍,也就是值为 0~100
class |
style |
opacity-50 |
opacity: 0.5 |
class |
style |
解释 |
pointer |
cuosor:pointer |
|
not-allowed |
cuosor:not-allowed |
|
cursor-xx |
cuosor:xx |
xx:属性合法值 |
class |
style |
解释 |
select-xx |
user-select: xx |
xx:none、auto、text、contain、all |
class |
style |
解释 |
list-xx |
list-style-type: xx |
xx:none、disc、circle、square、decimal |
class |
style |
解释 |
list-xx |
list-style-position: xx |
xx:inside、outsidel) |
class |
style |
解释 |
t-l |
text-align: left; |
|
t-r |
text-align: right; |
|
t-c |
text-align: center; |
|
text-xx |
text-align: xx; |
left、right、center、justify、justify-all、start、end |
class |
style |
解释 |
underline |
text-decoration-line: underline; |
|
line-through |
text-decoration-line: line-through; |
|
decoration-xx |
text-decoration-line:xx; |
none、underline、overline、line-through、blink、unset |
class |
style |
解释 |
decoration-xxx |
text-decoration-color: xxx; |
xxx:十六进制颜色值;注意不需要‘#’,如#fff 写color-fff |
class |
style |
truncate |
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; |
class |
style |
capitalize |
text-transform: capitalize |
uppercase |
text-transform: uppercase |
lowercase |
text-transform: lowercase |
class |
style |
解释 |
bg-xxx |
background-color: xx |
xxx:十六进制颜色值;注意不需要‘#’,如#fff 写color-fff |
class |
style |
解释 |
pointer-events--xxxx |
pointer-events: xxxx |
auto、none、visiblePainted、visibleFill、visibleStroke、visible、painted、fill、stroke、all、inherit、initial、unset |
class |
style |
解释 |
shadow-6_6_dedede |
box-shadow: 6px 6px #dedede |
|
shadow-6_6_6_dedede |
box-shadow: 6px 6px 6px #dedede |
|
shadow-6_6_6_6_dedede |
box-shadow: 6px 6px 6px 6px #dedede |
|
class |
style |
解释 |
duration-666 |
animation-duration: 666ms |
|
class |
style |
解释 |
animate-float |
animate-float: { animation: float 2s linear infinite; } |
动画循环上下浮动 15px |
class |
style |
解释 |
animate-ping |
animate-float: { ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } |
动画循环放大消失 |
class |
style |
解释 |
animate-ping |
animate-float: { spin 2s linear infinite; } |
动画顺时针旋转 |
class |
style |
解释 |
animate-ping |
animate-float: { spin-reverse 2s linear infinite; } |
动画逆时针旋转 |