Skip to content

postcss-propro

a postcss plugin adds and extends some properties

已经废弃,不建议使用。可以尝试 UnoCSS

Options

example

js
'postcss-propro': {
  backgroundColor: '#39cccc',
  lineColor: '#ff851b'
}
parameterdefaultwork
backgroundColor#0074d9btn
lineColor#cccarrow spread

Use

arrow

parametervaluedefault
typetop*
bottom*
left*
right*
top-left*
top-right*
bottom-left*
bottom-right*
sizesize10px
colorcolorlineColor

example

css
:root {
  --c-line: #ccc;
}
.foo {
  arrow: top-left 20px var(--c-line);
}

box min-box max-box

parametervaluedefault
width(min/max)width*
height(min/max)heightauto/none(max-height)

example

css
.foo {
  box: 100%;
  min-box: 5rem 2rem;
  max-box: 10rem 20vh;
}

btn

parametervaluedefault
widthwidth*
heightheightwidth
radiusborder-radius0
colorbackground-colorbackgroundColor
timetransition-duration1s

example

css
:root {
  --c-blue: #0074d9;
}
.foo {
  btn: 100px 40px 10px var(--c-blue);
}

font-cc

parametervaluedefault
heightline-height*

example

css
.foo {
  font-cc: 2rem;
}

font-hidden

parametervaluedefault
rownumber*

example

css
.foo {
  font-hidden: 1;
}
.other {
  // best with max-height if row greater than 1
  max-height: 60px;
  font-hidden: 3;
}

position

parametervaluedefault
positionabsolute*
fixed*
relative*
toptop* (same like margin)
rightrighttop
bottombottomtop
leftleftright

example

css
.foo {
  position: fixed 0;
}

position-cc

parametervaluedefault
null(by transform)
widthwidth* (by margin)
heightheightwidth

example

css
.foo {
  position-cc: 10rem 4rem;
}
.other {
  position-cc: ;
}

spread

parametervaluedefault
typetop*
bottom*
left*
right*
top-bottom*
bottom-top*
left-right*
right-left*
widthwidth100% or 1px(left right)
heightheight100% or 1px(top bottom)
colorcolorlineColor

example

css
:root {
  --c-line: #da3;
}
.foo {
  // best with line-height if type is bottom
  box: 8rem 4rem;
  line-height: calc(4rem - 2px);
  spread: bottom 100% 2px var(--c-line);
}
.other {
  spread: top-bottom var(--c-line);
}

创建时间:

最近更新: