在每个断点上处理同一组 CSS 选择器。如何保持 CSS 干燥？

Question

我已经写 CSS (SASS) 好几年了，可以说我非常精通。但是，我想不出以下代码的替代方案。

我现在的 SASS，针对 Whosebug 做了一些简化：

.container {
  &.-left {
    h1, 
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol {
      left: 0;
    }
  }

  &.-right {
    h1, 
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol {
      right: 0;
    }
  }
}



@include breakpoint(small) {
  .container {
    &.-left {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        left: 10px;
      }
    }

    &.-right {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        right: 10px;
      }
    }
  }
}



@include breakpoint(medium) {
  .container {
    &.-left {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        left: 20px;
      }
    }

    &.-right {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        right: 20px;
      }
    }
  }
}



@include breakpoint(large) {
  .container {
    &.-left {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        left: 30px;
      }
    }

    &.-right {
      h1, 
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      ul,
      ol {
        right: 30px;
      }
    }
  }
}

我不确定如何，但我认为可以用更优雅的方式编写代码。为每个断点多次列出和寻址同一组选择器感觉非常麻烦。您知道如何缩短这段代码并使其更具可读性吗？我想用 CSS 变量或 SASS 函数？

Answer 1

1。使用混合

您可以使用 @mixin 来存储选择器，然后 @include 它在您需要的地方：

@mixin defaultSelectors() {
  & {
    h1, 
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol {
      @content;
    }
  }
}

.container {
  &.-left {
    @include defaultSelectors {
      left: 0;
    }
  }

  &.-right {
    @include defaultSelectors {
      right: 0;
    }
  }
}

[...]

2。有一个变量

您还可以将选择器作为列表存储在变量中，然后使用 interpolation:

$defaultSelectors: h1, h2, h3, h4, h5, h6, p, ul, ol;

.container {
  &.-left {
    #{$defaultSelectors} {
      left: 0;
    }
  }

  &.-right {
    #{$defaultSelectors} {
      right: 0;
    }
  }
}

[...]

Answer 2

您可以像这样在其他选择器中添加 include：

.container {
  &.-left {
    h1, 
    h2 {
      left: 0;

      @include breakpoint(small) {
        left: 10px;
      }
      @include breakpoint(medium) {
        left: 20px;
      }
    }
  }

  &.-right {
    h1, 
    h2 {
      right: 0;

      @include breakpoint(small) {
        right: 10px;
      }
      @include breakpoint(medium) {
        right: 20px;
      }
    }
  }
}

在每个断点上处理同一组 CSS 选择器。如何保持 CSS 干燥？

Address the same group of CSS selectors on each breakpoint. How to keep the CSS DRY?

css

optimization

sass

css-selectors

breakpoints

1。使用混合

2。有一个变量