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

您可以使用@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简单易读，牺牲生成的css文件的可读性。作为开发人员，我只维护sass代码，而不是css。

Answer 2

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。

Sass中的项目列表

2 个答案:

SassMeister demo

Updated SassMeister demo