scss [mixin]快速添加填充和边距
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了scss [mixin]快速添加填充和边距相关的知识,希望对你有一定的参考价值。
//Padding mixin
@mixin padding($top, $right, $bottom, $left) {
padding-top: $top;
padding-right: $right;
padding-bottom: $bottom;
padding-left: $left;
}
//Margin mixin
@mixin margin($top, $right, $bottom, $left) {
margin-top: $top;
margin-right: $right;
margin-bottom: $bottom;
margin-left: $left;
}
//Usage definition
@include padding(top, right, bottom, left);
@include margin(top, right, bottom, left);
//Usage 1
@include padding(1px, 2px, 3px, 4px,);
@include margin(1px, 2px, 3px, 4px);
//Output 1
// padding: 1px 2px 3px 4px;
// margin: 1px 2px 3px 4px;
//Usage 2 (with null properties)
@include padding(1px, null, 3px, 4px);
@include margin(1px, 2px, null, 4px);
//Output 2
// padding-top: 1px;
// padding-bottom: 3px;
// padding-left: 4px;
// margin-top: 1px;
// margin-right: 2px;
// margin-left: 4px;
以上是关于scss [mixin]快速添加填充和边距的主要内容,如果未能解决你的问题,请参考以下文章
scss Sass mixin可快速添加渐变
从 Javascript 检测真正的边框、填充和边距
视图的填充和边距之间的区别
ActionScript 3 文字填充和边距
文本填充和边距
Android初学者填充和边距之间的区别[重复]