文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

util

发布于 2023-10-15 18:11:42 字数 10813 浏览 0 评论 0 收藏 0

常用辅助类工具函数。

依赖于：

variables

`.clearfix()`

建立 BFC 清除元素内部的浮动，使元素获得应有的高度。参见 A new micro clearfix hack。

.container {
.clearfix();
}

.container {
*zoom: 1;
}

.container:before,
.container:after {
display: table;
content: "";
}

.container:after {
clear: both;
}

.size()
设定元素的尺寸。
- .size(@side-length)
  @side-length
  正方形边长。
```
.square {
.size(16px);
}
```
```
.square {
width: 16px;
height: 16px;
}
```
- .size(@width, @height)
  @width
  矩形宽度。
  @height
  矩形高度。
```
.rect {
.size(320px, 80px);
}
```
```
.rect {
width: 320px;
height: 80px;
}
```
.margin-rem()
用于将 px 单位的外边距转换为 rem 单位。依赖于 @default-font-size，请确保 <HTML> 标签的字体大小与 @default-font-size 一致。
- .margin-rem(@px-size)
  @px-size
  以 px 为单位的外边距。可以是纯数字（如 14）也可以是带 px 单位的值（如 14px）。支持 1 – 4 个空格分隔的值，写法参考 CSS 的 margin 属性。
```
.post {
.margin-rem(24px);
}
```
```
.post {
margin: 24px;
margin: 1.5rem;
}
```
.margin-top-rem()
用于将 px 单位的上外边距转换为 rem 单位。依赖于 @default-font-size，请确保 <HTML> 标签的字体大小与 @default-font-size 一致。
- .margin-top-rem(@px-size)
  @px-size
  以 px 为单位的外边距。可以是纯数字（如 14）也可以是带 px 单位的值（如 14px）。
```
.post {
.margin-top-rem(12px);
}
```
```
.post {
margin-top: 12px;
margin-top: 0.75rem;
}
```
.margin-right-rem()
用于将 px 单位的右外边距转换为 rem 单位。
参数说明请参考 .margin-top-rem()。
.margin-bottom-rem()
用于将 px 单位的下外边距转换为 rem 单位。
参数说明请参考 .margin-top-rem()。
.margin-left-rem()
用于将 px 单位的左外边距转换为 rem 单位。
参数说明请参考 .margin-top-rem()。
.margin-em()
用于将 px 单位的外边距转换为 em 单位。依赖于 @default-font-size，请确保 <HTML> 标签的字体大小与 @default-font-size 一致。
- .margin-em(@px-size, @context-margin)
  @px-size
  以 px 为单位的外边距。可以是纯数字（如 14）也可以是带 px 单位的值（如 14px）。支持 1 – 4 个空格分隔的值，写法参考 CSS 的 margin 属性。
  @context-margin
  上下文的字体大小，格式与 @px-size 一致。可选，默认值：@default-font-size。
```
.post {
.margin-em(24px);
}
```
```
.post {
margin: 1.5em;
}
```
.margin-top-em()
用于将 px 单位的上外边距转换为 em 单位。依赖于 @default-font-size，请确保 <HTML> 标签的字体大小与 @default-font-size 一致。
- .margin-top-em(@px-size)
  @px-size
  以 px 为单位的外边距。可以是纯数字（如 14）也可以是带 px 单位的值（如 14px）。
```
.post {
.margin-top-em(12px);
}
```
```
.post {
margin-top: 0.75em;
}
```
.margin-right-em()
用于将 px 单位的右外边距转换为 em 单位。
参数说明请参考 .margin-top-em()。
.margin-bottom-em()
用于将 px 单位的下外边距转换为 em 单位。
参数说明请参考 .margin-top-em()。
.margin-left-em()
用于将 px 单位的左外边距转换为 em 单位。
参数说明请参考 .margin-top-em()。
.padding-rem()
用于将 px 单位的内边距转换为 rem 单位。依赖于 @default-font-size，请确保 <HTML> 标签的字体大小与 @default-font-size 一致。
- .padding-rem(@px-size)
  @px-size
  以 px 为单位的内边距。可以是纯数字（如 14）也可以是带 px 单位的值（如 14px）。支持 1 – 4 个空格分隔的值，写法参考 CSS 的 padding 属性。
```
.post {
.padding-rem(24px);
}
```
```
.post {
padding: 24px;
padding: 1.5rem;
}
```
.padding-top-rem()
用于将 px 单位的上内边距转换为 rem 单位。依赖于 @default-font-size，请确保 <HTML> 标签的字体大小与 @default-font-size 一致。
- .padding-top-rem(@px-size)
  @px-size
  以 px 为单位的内边距。可以是纯数字（如 14）也可以是带 px 单位的值（如 14px）。
```
.post {
.padding-top-rem(12px);
}
```
```
.post {
padding-top: 12px;
padding-top: 0.75rem;
}
```
.padding-right-rem()
用于将 px 单位的右内边距转换为 rem 单位。
参数说明请参考 .padding-top-rem()。
.padding-bottom-rem()
用于将 px 单位的下内边距转换为 rem 单位。
参数说明请参考 .padding-top-rem()。
.padding-left-rem()
用于将 px 单位的左内边距转换为 rem 单位。
参数说明请参考 .padding-top-rem()。
.padding-em()
用于将 px 单位的内边距转换为 em 单位。依赖于 @default-font-size，请确保 <HTML> 标签的字体大小与 @default-font-size 一致。
- .padding-em(@px-size, @context-padding)
  @px-size
  以 px 为单位的内边距。可以是纯数字（如 14）也可以是带 px 单位的值（如 14px）。支持 1 – 4 个空格分隔的值，写法参考 CSS 的 padding 属性。
  @context-padding
  上下文的字体大小，格式与 @px-size 一致。可选，默认值：@default-font-size。
```
.post {
.padding-em(24px);
}
```
```
.post {
padding: 1.5em;
}
```
.padding-top-em()
用于将 px 单位的上内边距转换为 em 单位。依赖于 @default-font-size，请确保 <HTML> 标签的字体大小与 @default-font-size 一致。
- .padding-top-em(@px-size)
  @px-size
  以 px 为单位的内边距。可以是纯数字（如 14）也可以是带 px 单位的值（如 14px）。
```
.post {
.padding-top-em(12px);
}
```
```
.post {
padding-top: 0.75em;
}
```
.padding-right-em()
用于将 px 单位的右内边距转换为 em 单位。
参数说明请参考 .padding-top-em()。
.padding-bottom-em()
用于将 px 单位的下内边距转换为 em 单位。
参数说明请参考 .padding-top-em()。
.padding-left-em()
用于将 px 单位的左内边距转换为 em 单位。
参数说明请参考 .padding-top-em()。

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

列表为空，暂无数据

util

`.clearfix()`

`.size()`

`.size(@side-length)`

`.size(@width, @height)`

`.margin-rem()`

`.margin-rem(@px-size)`

`.margin-top-rem()`

`.margin-top-rem(@px-size)`

`.margin-right-rem()`

`.margin-bottom-rem()`

`.margin-left-rem()`

`.margin-em()`

`.margin-em(@px-size, @context-margin)`

`.margin-top-em()`

`.margin-top-em(@px-size)`

`.margin-right-em()`

`.margin-bottom-em()`

`.margin-left-em()`

`.padding-rem()`

`.padding-rem(@px-size)`

`.padding-top-rem()`

`.padding-top-rem(@px-size)`

`.padding-right-rem()`

`.padding-bottom-rem()`

`.padding-left-rem()`

`.padding-em()`

`.padding-em(@px-size, @context-padding)`

`.padding-top-em()`

`.padding-top-em(@px-size)`

`.padding-right-em()`

`.padding-bottom-em()`

`.padding-left-em()`

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

util

.clearfix()

.size()

.size(@side-length)

.size(@width, @height)

.margin-rem()

.margin-rem(@px-size)

.margin-top-rem()

.margin-top-rem(@px-size)

.margin-right-rem()

.margin-bottom-rem()

.margin-left-rem()

.margin-em()

.margin-em(@px-size, @context-margin)

.margin-top-em()

.margin-top-em(@px-size)

.margin-right-em()

.margin-bottom-em()

.margin-left-em()

.padding-rem()

.padding-rem(@px-size)

.padding-top-rem()

.padding-top-rem(@px-size)

.padding-right-rem()

.padding-bottom-rem()

.padding-left-rem()

.padding-em()

.padding-em(@px-size, @context-padding)

.padding-top-em()

.padding-top-em(@px-size)

.padding-right-em()

.padding-bottom-em()

.padding-left-em()

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

`.clearfix()`

`.size()`

`.size(@side-length)`

`.size(@width, @height)`

`.margin-rem()`

`.margin-rem(@px-size)`

`.margin-top-rem()`

`.margin-top-rem(@px-size)`

`.margin-right-rem()`

`.margin-bottom-rem()`

`.margin-left-rem()`

`.margin-em()`

`.margin-em(@px-size, @context-margin)`

`.margin-top-em()`

`.margin-top-em(@px-size)`

`.margin-right-em()`

`.margin-bottom-em()`

`.margin-left-em()`

`.padding-rem()`

`.padding-rem(@px-size)`

`.padding-top-rem()`

`.padding-top-rem(@px-size)`

`.padding-right-rem()`

`.padding-bottom-rem()`

`.padding-left-rem()`

`.padding-em()`

`.padding-em(@px-size, @context-padding)`

`.padding-top-em()`

`.padding-top-em(@px-size)`

`.padding-right-em()`

`.padding-bottom-em()`

`.padding-left-em()`

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。