Оптимизация кода sass для уменьшения дублирования

Question

Я написал следующие модификаторы заполнения, которые при компиляции должны удалять заполнение.

ТАК у меня есть

.no-padding{

  &--all{
   padding:0!important;
  }

 &--top{
  padding-top:0!important;
 }

 &--bottom{
  padding-bottom:0!important;
 }

 &--left{
  padding-left:0!important;
 }

 &--right{
  padding-right:0!important;
 }
}

Это работает в css например: <div class="no-padding--all"> удаляет заполнение со всех сторон. Но я проверяю способ дальнейшей оптимизации, так как у меня аналогичное повторение и для наценок. Как еще можно оптимизировать это в sass.

Answer 1

У меня был бы другой подход, чем другие ответы.

Я бы использовал две карты и две функции @each.

Сначала я определю направления:

$directions: top, right, bottom, left;  

Затем свойства:

$properties: padding, margin;

Полный код:

$directions: top, right, bottom, left;
$properties: padding, margin;

/* This loop will create the .x-all classes */
@each $property in $properties {
  .no-#{$property}--all {
    #{$property} : 0 !important;
  }
}
/* This loop will create all the other direction specific classes */
@each $direction in $directions {
    @each $property in $properties {
    .no-#{$property}--#{$direction} {
      #{$property}-#{$direction} : 0 !important;  
    }
  }
}

Answer 2

Вы можете использовать миксин

@mixin no-padding(
  $all: false,
  $left: false,
  $right: false,
  $top: false,
  $bottom: false,
 ) {
   @if($all) {
     padding: 0 !important;
   }
   @if($left) {
     padding-left: 0 !important;
   }
   @if($right) {
     padding-right: 0 !important;
   }
   @if($top) {
     padding-top: 0 !important;
   }
   @if($bottom) {
     padding-bottom: 0 !important;
   }

}

Использование:

.no-padding--all {
  @include no-padding($all: true);
}
.no-padding--left {
  @include no-padding($left: true);
}
.padding--left-only {
  @include no-padding($top: true, $right: true, $bottom: true);
}
.no-padding--vertical {
  @include no-padding($left: true, $right: true);
}

Кроме того, это дает вам возможность и гибкость давать аргументы на ваш выбор, и вы можете писать гибкие классы , поэтому вам не нужно указывать несколько имен классов в HTML. (например: padding--left-only, no-padding--vertical)

Вы можете написать миксин для динамического присвоения свойства ( Я не рекомендую ).

@mixin no-property(
  $property,
  $all: false,
  $left: false,
  $right: false,
  $top: false,
  $bottom: false,
 ) {
   @if($all) {
     #{$property}: 0 !important;
   }
   @if($left) {
     #{$property}-left: 0 !important;
   }
   @if($right) {
     #{$property}-right: 0 !important;
   }
   @if($top) {
     #{$property}-top: 0 !important;
   }
   @if($bottom) {
     #{$property}-bottom: 0 !important;
   }
}

использование:

.no-padding--left {
  @include no-property($property: 'padding', $left: true);
}
.no-margin--right {
  @include no-property($property: 'margin', $right: true);
}

Answer 3

Вы можете упростить это далее:

.no-padding{
 padding: 0 !important;

 &--top{
  padding-top: 0 !important;
 }

 &--bottom{
  padding-bottom: 0 !important;
 }

 &--left{
  padding-left: 0 !important;
 }

 &--right{
  padding-right: 0 !important;
 }
}

Таким образом, вы можете использовать .no-padding напрямую вместо .no-padding--all.

Вы также можете упростить именование ваших модификаторов, например, используя одна буква вместо --top, --right, --bottom, --left до --t, --r, --b, --l в противном случае все остальное в порядке.

Миксин также может выполнить эту работу:

@mixin no-padding($dir){
    @if $dir == 'top' {
        padding-top: 0 !important;
    }

    @if $dir == 'right' {
        padding-right: 0 !important;
    }

    @if $dir == 'bottom' {
        padding-bottom: 0 !important;
    }

    @if $dir == 'left' {
        padding-left: 0 !important;
    }

    @if $dir == 'all' {
        padding: 0 !important;
    }
}

И включить его в свои классы следующим образом:

.no-padding{
 @include no-padding(all);

 &--top{
  @include no-padding(top);
 }

 &--bottom{
  @include no-padding(bottom);
 }

 &--left{
  @include no-padding(left);
 }

 &--right{
  @include no-padding(right);
 }
}

Обратите внимание, что вы можете использовать этот миксин @include no-padding($dir) с любым классом.