-
Notifications
You must be signed in to change notification settings - Fork 4
util
前端小尚 edited this page Mar 2, 2015
·
1 revision
常用辅助类工具函数。
##$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;
}