List of items in Sass - list

Question

I want to define a list of text input selectors in Sass such as:
[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"],
and then to use that list around my sass code. How can I set those as a variable and then to use them as above elsewhere?

Answer 1

Lists are worth learning about in SASS.
Addressing your need, let's define your list:
$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']";
We can run #each over it and get individual selectors:
#each $selector in $text-input-selectors {
#{$selector} {
font-weight: normal;
}
}
Result:
[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;
}
Or we can run code that concatenates it to a comma separated string:
$all-selectors: null;
#each $item in $text-input-selectors {
$all-selectors: $all-selectors, unquote(#{$item});
}
#{$all-selectors} {
color: red;
}
Result:
[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;
}
I highly recommend Sassmeister for experimenting with SASS code. Can choose version to some extent, and use either SASS or SCSS.

Answer 2

You can use the #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
As mentioned by #cimmanon, it is true that there will be a lot of selectors which will make the css less readable. It is possible to use the trick from #artlung and combine all selectors into one:
$joined-selector: null;
#each $prop in $types {
$elem: "input[type='#{$prop}']";
$joined-selector: $joined-selector, $elem;
}
#{$joined-selector} {
padding: 0;
}
Updated SassMeister demo
That sass code looks rather complex to me. I prefer keeping sass simple and readable and sacrificing readability of the generated css file. As I developer I only maintain sass code, not the css.