Sass 中的项目列表

Question

我想在 Sass 中定义一个文本输入选择器列表，例如：

  [type="text"],
  [type="color"],
  [type="date"],
  [type="datetime"],
  [type="datetime-local"],
  [type="email"],
  [type="month"],
  [type="number"],
  [type="range"],
  [type="search"],
  [type="tel"],
  [type="time"],
  [type="url"],
  [type="week"],

然后在我的 sass 代码周围使用该列表。如何将它们设置为变量，然后在其他地方使用它们？

Answer 1

Lists 值得在 SASS 中学习。

满足您的需求，让我们定义您的列表：

$text-input-selectors: "[type='text']" "[type='color']" "[type='date']"
            "[type='datetime']" "[type='datetime-local']"
            "[type='email']" "[type='month']" "[type='number']"
            "[type='range']" "[type='search']" "[type='tel']"
            "[type='time']" "[type='url']" "[type='week']";

我们可以在它上面运行@each 并获得单独的选择器：

@each $selector in $text-input-selectors {
   #{$selector} {
      font-weight: normal;
   }
}

结果：

[type='text'] {
  font-weight: normal;
}

[type='color'] {
  font-weight: normal;
}

[type='date'] {
  font-weight: normal;
}

[type='datetime'] {
  font-weight: normal;
}

[type='datetime-local'] {
  font-weight: normal;
}

[type='email'] {
  font-weight: normal;
}

[type='month'] {
  font-weight: normal;
}

[type='number'] {
  font-weight: normal;
}

[type='range'] {
  font-weight: normal;
}

[type='search'] {
  font-weight: normal;
}

[type='tel'] {
  font-weight: normal;
}

[type='time'] {
  font-weight: normal;
}

[type='url'] {
  font-weight: normal;
}

[type='week'] {
  font-weight: normal;
}

或者我们可以运行将其连接到逗号分隔字符串的代码：

$all-selectors: null;
@each $item in $text-input-selectors {
  $all-selectors: $all-selectors, unquote(#{$item});
}

#{$all-selectors} {
   color: red;  
}

结果：

[type='text'], [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='range'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='week'] {
  color: red;
}

我强烈推荐 Sassmeister 来试验 SASS 代码。可以在一定程度上选择版本，使用SASS或SCSS。

Answer 2

您可以使用@each directive:

$types: text, color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week;

@each $prop in $types {
  input[type="#{$prop}"] {
    padding: 0;
    // other meaningful properties
  }
}

SassMeister demo

---

正如@cimmanon 所提到的，确实会有很多选择器会降低 css 的可读性。可以使用@artlung 中的技巧并将所有选择器合并为一个：

$joined-selector: null;

@each $prop in $types {
  $elem: "input[type='#{$prop}']";
  $joined-selector: $joined-selector, $elem;
}

#{$joined-selector} {
  padding: 0;
}

Updated SassMeister demo

那个 sass 代码在我看来相当复杂。我更喜欢保持 sass 简单易读，并牺牲生成的 css 文件的可读性。作为开发人员，我只维护 sass 代码，而不是 css。