Html 为什么在sass中使用填充和边距的混合？

我知道为什么要使用sass，但我想知道为什么要使用填充和边距的混合？ 请看一下这个例子：

@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的边距填充混合，因为所有的sass都只使用一行代码呢？

使用混合可能只有在您重复几个不同的属性（例如填充和边距）时才有用。然后您可以使用类似这样的内容，并且只使用一行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;
  }
}

如果不使用其中一个属性，甚至可以使用null值

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%;
}

---

@混合、重复和条件语句@each、@if-in-Sass非常有用如果您需要生成一些有用的样式类（在本例中用于边距和填充），下面我为边距和填充类编写了一个util-Sass代码，用于修改元素的填充和边距

//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;
}

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

该属性应用间距类型：

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

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

例如填充顶部：4px将创建一个CSS类：

.pt-1 {
  padding-top: 4px !important;
}

您可以找到更详细的文档。 我做了这个代码，从我的想法，并作出一些修改，以适应我的需要

---

我希望这能有所帮助。

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

这样，您的前端开发人员和用户体验就不会产生所有类型的填充和边距值。相反，填充和边距值保持一致

//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);
}

---

根本不需要。一些新手可能已经编写了该代码，或者正在使用它。你可以完全忽略它，因为它没有任何意义。如果它只是一个示例，那么它就不一定有用（只是一个简单的示例，说明事情的外观……例如，在语言文档中，很难给出一个可用的mixin示例，而不首先介绍一些更复杂的概念）。