postcss-propro

a postcss plugin adds and extends some properties

# Options

example

'postcss-propro': {
  backgroundColor: '#39cccc',
  lineColor: '#ff851b'
}
parameter default work
backgroundColor #0074d9 btn
lineColor #ccc arrow spread

# Use

# arrow

parameter value default
type top *
bottom *
left *
right *
top-left *
top-right *
bottom-left *
bottom-right *
size size 10px
color color lineColor

example

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

effect

top
bottom
left
right
top-left
top-right
bottom-left
bottom-right

# box min-box max-box

parameter value default
width (min/max)width *
height (min/max)height auto/none(max-height)

example

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

# btn

parameter value default
width width *
height height width
radius border-radius 0
color background-color backgroundColor
time transition-duration 1s

example

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

effect

btn

# font-cc

parameter value default
height line-height *

example

.foo {
  font-cc: 2rem;
}

# font-hidden

parameter value default
row number *

example

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

effect

font-hidden: 1

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

font-hidden: 2

PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.

# position

parameter value default
position absolute *
fixed *
relative *
top top * (same like margin)
right right top
bottom bottom top
left left right

example

.foo {
  position: fixed 0;
}

# position-cc

parameter value default
null (by transform)
width width * (by margin)
height height width

example

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

# spread

parameter value default
type top *
bottom *
left *
right *
top-bottom *
bottom-top *
left-right *
right-left *
width width 100% or 1px(left right)
height height 100% or 1px(top bottom)
color color lineColor

example

: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);
}

effect

top
bottom
left
right
top-bottom
bottom-top
left-right
right-left

vuepress-theme-ououe

vuepress-theme-ououe

基于 vuepress 的博客主题

m-less 参数介绍

m-less 参数介绍

个人整理常用的css属性简写及常用的 mixins