util - xjchenhao/qst GitHub Wiki

常用辅助类工具函数。

##$clearfix() 建立 BFC 清除元素内部的浮动，使元素获得应有的高度。

.clearfix{
  $clearfix();
}
/*编译后*/
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
  *zoom: 1;
}

##$size() 设定元素的尺寸。一个参数为正方形，两个参数分别为宽高

div{
  $size(30px,20px);
}
/*编译后*/
div {
  width: 30px;
  height: 20px;
}

##$margin-rem() 用于将 px 单位的外边距转换为 rem 单位。依赖于 $default-font-size，请确保 标签的字体大小与 基础变量 $default-font-size 一致。(如果基础变量 $original-size 为false将不保留原先的px单位的代码行)

还提供了 $margin-top-rem() \ $margin-right-rem() \ $margin-bottom-rem() \ $margin-left-rem() \ $padding-rem() \ $padding-top-rem() \ $padding-right-rem() \ $padding-bottom-rem() \ $padding-left-rem() \ $top-rem() \ $right-rem() \ $bottom-rem() \ $left-rem() \ $height-rem() \ $width-rem() ，与之同理。

div{
  $margin-rem(30px 30px 20px)
}
/*编译后*/
div {
  margin: 30px 30px 20px;
  margin: 1.875rem 1.875rem 1.25rem;
}

##$rem() rem万金油，强烈推荐使用！（ps：它不能保留原先的px代码行）

div{
  margin:$rem(16px 32px)
}
/*编译后*/
div {
  margin:1rem 2rem;
}