vue-base-demo/src/styles/base/mixin/em.less

vue base demo

@import "../variable/global";

.width(@p) {
  width: @p /@sizeNum * 1rem;
}

.minWidth(@p) {
  min-width: @p /@sizeNum * 1rem;
}

.height(@p) {
  height: @p /@sizeNum * 1rem;
}

.minHeight(@p) {
  min-height: @p /@sizeNum * 1rem;
}

/*
font
*/
.fontSize(@p) {
  font-size: @p /@sizeNum * 1rem;
}

.lineHeight(@p) {
  line-height: @p /@sizeNum * 1rem;
}

/*
position
*/
.top(@p) {
  top: @p /@sizeNum * 1rem;
}

.bottom(@p) {
  bottom: @p /@sizeNum * 1rem;
}

.left(@p) {
  left: @p /@sizeNum * 1rem;
}

.right(@p) {
  right: @p /@sizeNum * 1rem;
}

/*
padding
*/
.padding(@p) {
  padding: @p /@sizeNum * 1rem;
}

.paddingTop(@p) {
  padding-top: @p /@sizeNum * 1rem;
}

.paddingBottom(@p) {
  padding-bottom: @p /@sizeNum * 1rem;
}

.paddingLeft(@p) {
  padding-left: @p /@sizeNum * 1rem;
}

.paddingRight(@p) {
  padding-right: @p /@sizeNum * 1rem;
}

/*
margin
*/
.margin(@p) {
  margin: @p /@sizeNum * 1rem;
}

.marginTop(@p) {
  margin-top: @p /@sizeNum * 1rem;
}

.marginBottom(@p) {
  margin-bottom: @p /@sizeNum * 1rem;
}

.marginLeft(@p) {
  margin-left: @p /@sizeNum * 1rem;
}

.marginRight(@p) {
  margin-right: @p /@sizeNum * 1rem;
}

/*
border-radius
*/
.borderRadius(@p) {
  border-radius: @p /@sizeNum * 1rem;
}

.borderTopLeftRadius(@p) {
  border-top-left-radius: @p /@sizeNum * 1rem;
}

.borderTopRightRadius(@p) {
  border-top-right-radius: @p /@sizeNum * 1rem;
}

.borderBottomRightRadius(@p) {
  border-bottom-right-radius: @p /@sizeNum * 1rem;
}

.borderBottomLeftRadius(@p) {
  border-bottom-left-radius: @p /@sizeNum * 1rem;
}

/*text*/
.textIndent(@p) {
  text-indent: @p /@sizeNum * 1rem;
}

.maxWidth(@p) {
  max-width: @p /@sizeNum * 1rem;
}
.minWidth(@p) {
  min-width: @p /@sizeNum * 1rem;
}
.maxHeight(@p) {
  max-height: @p /@sizeNum * 1rem;
}
.minHeight(@p) {
  min-height: @p /@sizeNum * 1rem;
}