List Sass中的项目列表

我想在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代码周围使用该列表。如何将这些设置为变量，然后在其他地方使用它们？

您可以使用：

---

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

$joined-selector: null;

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

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

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

值得在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 $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;
}

[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;
}

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

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

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

结果:

[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;
}

[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;
}

---

我强烈建议您尝试SASS代码。可以在某种程度上选择版本，并使用SASS或SCSS。

可能的副本没有人愿意这样做。这会生成臃肿的CSS。@cimmanon找到解决方案是一个迭代过程。我最初的回答解决了OP提到的问题。的确，生成的css看起来不可读，但它保持了sass文件的简单性。