Css 在SASS中使用类数组

使用SASS/SCSS。我有以下资料：

body:not(.sessions):not(.registrations):not(.home):not(.posts.new) {
  padding-top: 4.5rem;
  padding-bottom: 7rem;
}

这根本不可读。如何通过使用类数组重构此文件：

$full-page-classes: .sessions .registrations .home .posts.new

---

如果我正确理解您的意思，您可能希望使用如下数组：

$full-page-classes: '.sessions', '.registrations', '.home', '.posts.new';

@each $page-class in $full-page-classes {
  body:not(#{$page-class}) {
    padding-top: 4.5rem;
    padding-bottom: 7rem;
  }
}

输出：

body:not(.sessions) {
  padding-top: 4.5rem;
  padding-bottom: 7rem;
}

body:not(.registrations) {
  padding-top: 4.5rem;
  padding-bottom: 7rem;
}

body:not(.home) {
  padding-top: 4.5rem;
  padding-bottom: 7rem;
}

body:not(.posts.new) {
  padding-top: 4.5rem;
  padding-bottom: 7rem;
}

body:not(.sessions):not(.registrations):not(.home):not(.posts.new) {
  padding-top: 4.5rem;
  padding-bottom: 7rem;
}

你可以试穿一下

---

更新：

如果要生成内联CSS，可以尝试以下方法：

$full-page-classes: '.sessions', '.registrations', '.home', '.posts.new';

$temp: '';

@each $page-class in $full-page-classes {
  $temp: $temp + ':not(#{$page-class})';
}

@each $item in $temp {
  body#{$item} {
    padding-top: 4.5rem;
    padding-bottom: 7rem;
  }
}

输出：

body:not(.sessions) {
  padding-top: 4.5rem;
  padding-bottom: 7rem;
}

body:not(.registrations) {
  padding-top: 4.5rem;
  padding-bottom: 7rem;
}

body:not(.home) {
  padding-top: 4.5rem;
  padding-bottom: 7rem;
}

body:not(.posts.new) {
  padding-top: 4.5rem;
  padding-bottom: 7rem;
}

body:not(.sessions):not(.registrations):not(.home):not(.posts.new) {
  padding-top: 4.5rem;
  padding-bottom: 7rem;
}

---

更新2：

@function str-replace($string, $search, $replace: '') {
  $index: str-index($string, $search);

  @if $index {
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
  }

  @return $string;
}

$full-page-classes: ' .sessions, .registrations, .home, .posts.new,';

@each $x in str-replace(str-replace($full-page-classes, ' ', ':not('), ',', ')') {
  body#{$x} {
    padding-top: 4.5rem;
    padding-bottom: 7rem;
  }
}

---

参考：

body:not（.sessions）：not（.registrations）：not（.home）：not（.posts.new）这是一个本机选择器，您想问一下sass选择器可以循环拼接吗@多一点点爱 是的，我如何在SASS中重构它？抱歉，我不知道。我会关注你的问题。谢谢，但这会生成多个

正文
，这会导致编译后的CSS文件更大，而它们本可以作为一个语句连接。这真的拼接了选择器，我认为这个方法会起作用。但是你能把函数封装成直接调用吗？它甚至比本机选择器更复杂@多一点点爱 我只能考虑将函数定义为所有sass/scss文件的库，就像我的更新2一样。