Question

使用带有轨道的sass。在设计中，有一种模式，从桌面到移动，空间缩小到一半。现在最终结果如下：

.my-page {
  .class-a {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .class-b {
    padding-top: 30px;
    padding-bottom: 30px; 
  }
}

@media(min-width: 768px) {
  .my-page {
    .class-a {
      margin-top: 40px;
      margin-bottom: 40px;
    }
    .class-b {
      padding-top: 60px;
      padding-bottom: 60px; 
    }
  }
}

想知道是否有一种干燥方法？不想重复写两次相同的课程。

Answer 1

干掉你的sass的好方法是使用mixins。

@mixin page-spaces($margin, $padding) {
  .my-page {
    .class-a {
      margin-top: $margin;
      margin-bottom: $margin;
    }
    .class-b {
      padding-top: $padding;
      padding-bottom: $padding; 
    }
  }
}

@include page-spaces(20px, 30px);

@media(min-width: 768px) {
  @include page-spaces(40px, 60px);
}

SASS Reference on Mixins

编辑：为了澄清mixins的用途，这里是一个带有多个参数的扩展版本（甚至是默认版本）：

@mixin awesome-page-stuff($stylish-margin, $cute-padding, $some-left-margin, $ugly-background: red) {
  .my-page {
    background: $ugly-background;
    .class-a {
      margin-top: $stylish-margin;
      margin-bottom: $stylish-margin;
    }
    .class-b {
      padding-top: $cute-padding;
      padding-bottom: $cute-padding; 
      margin-left: $some-left-margin;
    }
  }
}

@include awesome-page-stuff(20px, 30px, 50px);

@media(min-width: 768px) {
  @include awesome-page-stuff(40px, 60px, 200px, green);
}

Answer 2

你可以创建变量，如下所示：

$primary-margin: 20px;
$primary-padding: 30px;
.my-page {
  .class-a {
    margin-top: $primary-margin;
    margin-bottom: $primary-margin;
  }
  .class-b {
     padding-top: $primary-padding;
     padding-bottom: $primary-padding; 
  }
}

@media(min-width: 768px) {
  .my-page {
    .class-a {
      margin-top: $primary-margin*2;
      margin-bottom: $primary-margin*2;
    }
    .class-b {
      padding-top: $primary-padding*2;
      padding-bottom: $primary-padding*2; 
    }
  }
}

DRY Sass代码仅对值进行更改

2 个答案: