Question

我知道为什么要使用sass但是我想知道为什么要使用padding和margin的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 defination:

@include padding(top, right, bottom, left); // one line code
@include margin(top, right, bottom, left);  // one line code

css代码：

 padding: 1px 2px 3px 4px; // one line code
 margin: 1px 2px 3px 4px;  // one line code

那么为什么要使用sass的margin padding mixin，因为所有人只需要一行代码？

Answer 1

使用mixin可能仅在重复几个不同的属性（如填充和边距）时才有用。然后你可以使用这样的东西，只使用一行CSS：

@mixin margin-padding($m-direction, $m-amount, $p-direction, $p-amount) {
  @if $m-direction == all {
    margin: $m-amount;
  } @else {
    margin-#{$m-direction}: $m-amount;
  }
  @if $p-direction == all {
    padding: $p-amount;
  } @else {
    padding-#{$p-direction}: $p-amount;
  }
}

如果您没有使用其中一个属性，甚至可以使用空值。

CSS代码示例：

.some-class {
  @include margin-padding(all, 5% 0, bottom, 5%);
}

.some-other-class {
  @include margin-padding(all, 0 auto 5%, null, null);
}

哪个会编译为：

.some-class {
  margin: 5% 0;
  padding-bottom: 5%;
}

.some-other-class {
  margin: 0 auto 5%;
}

Answer 2

@mixin，重复语句和条件语句@ each，@ if在Sass中非常有用，如果您需要在这种情况下为边距和填充生成一些有用的样式类，这里我为下面的边距和填充类制作了util Sass代码Spacing helpers，对于修改元素的填充和边距很有用。

scripts [
    "./node_modules/bootstrap/dist/css/bootstrap.min.js"
]

工作方式： 辅助类将边距或填充应用于范围从0到5的元素。每个尺寸增量均设计为与常见的“材料设计”间距对齐。可以使用以下格式 {property} {direction}-{size} 应用这些类。

该属性应用间距类型：

m -应用边距 p -应用填充方向指定该属性应用于的一侧：

t -为 *-top
b -为 *-底部
l -为 *-左
r -为 *-right
x -为 -左和 -右
y -为 -顶部 和 -底部
a -在所有方向上为属性应用间距

例如 padding-top：4px; 将创建CSS类：

//padding, margin spacer vars 
$spacer: 16;
$max: 5;
$zero: 0px;
$one: unquote( ( $spacer * 0.25  ) + 'px' );
$two: unquote( ( $spacer * 0.5  ) + 'px' );
$three: unquote( ( $spacer ) + 'px' );
$four: unquote( ( $spacer * 1.5 ) + 'px' );
$five: unquote( ( $spacer * 3 ) + 'px' );

$spaces: ($zero, $one, $two, $three, $four, $five); // Adjust this to include the pixel amounts you need.
$sides: (x, y, all, top, bottom, left, right); // Leave this variable alone
$i: 0;
@each $space in $spaces {
    @each $side in $sides {
        @if $side == all {
            .pa-#{$i} {
                padding: #{$space} #{$space} !important;
            }
        } @else if $side == x {
            .px-#{$i} {
                padding-left: #{$space} !important;
                padding-right: #{$space} !important;
            }
        } @else if $side == y {
            .py-#{$i} {
                padding-top: #{$space} !important;
                padding-bottom: #{$space} !important;
            }
        } @else {
            .p#{str-slice($side, 0, 1)}-#{$i} {
                padding-#{$side}: #{$space} !important;
            }
        }
    }
    @each $side in $sides {
        @if $side == all {
            .ma-#{$i} {
                margin: #{$space} #{$space} !important;
            }
        } @else if $side == x {
            .mx-#{$i} {
                margin-left: #{$space} !important;
                margin-right: #{$space} !important;
            }
        } @else if $side == y {
            .my-#{$i} {
                margin-top: #{$space} !important;
                margin-bottom: #{$space} !important;
            }
        } @else {
            .m#{str-slice($side, 0, 1)}-#{$i} {
                margin-#{$side}: #{$space} !important;
            }
        }
    }
    $i: $i + 1;
}

您可以找到更详细的文档Vuetify spacing doc。我编写了这段代码，采用了jacurtis/_spacing-helpers.scss的想法，并进行了一些修改以满足我的需求。

我希望有帮助。

Answer 3

我使用padding和margin混合来限制可以应用于每个元素的padding和margin值的变化。我称它为微电网系统。

这样，您的前端开发人员和UX就不会提出所有填充和边距值。相反，填充和边距值保持一致。

//map that defines key value pair of well-defined spacing range
$spaces: (none: 0,
3xs: 3px,
2xs: 5px,
1xs: 10px,
sm: 15px,
md: 20px,
lg: 25px,
1xl: 30px,
2xl: 35px,
4xl: 40px);

//padding mixin that takes direction of padding that needs to be applied
//and one spacing qualifier (in this case, anywhere between 3xs to 3xl).
//you will also do the same for margin mixin
@mixin padding($direction: all, $size: md) {
   @if $direction == all {
       @include spacer(padding, $size);
   }
   @else @if $direction == left {
       @include spacer(padding-left, $size);
   }
   @else @if $direction == right {
       @include spacer(padding-right, $size);
   }
   @else @if $direction == top {
       @include spacer(padding-top, $size);
   }
   @else @if $direction == bottom {
       @include spacer(padding-bottom, $size);
   }
   @else @if $direction == x {
       @include spacer(padding-left, $size);
       @include spacer(padding-right, $size);
   }
   @else @if $direction == y {
       @include spacer(padding-top, $size);
       @include spacer(padding-bottom, $size);
   }
}

//just another helper mixin to avoid repeating code
@mixin spacer($attribute, $unit) {
   #{$attribute}: map-get($spacing, $unit);
}

//mixin in action
.hero-area {
   @include padding(y, 3xl);
}

为什么在sass中使用padding和margin的mixin？

3 个答案: